آموزش کار با المان آیکون در المنتور

آموزش کار با المان آیکون در المنتور موضوع این جلسه آموزش المنتور است اگر دوست دارید یاد بگیرید به صورت خلاقانه از المان آیکون در المنتور استفاده کنید حتماً ویدیو آموزشی این جلسه رو مشاهده کنید. در واقع وجود المان آیکون در یک بخش باعث بهتر توصیف شدن اون بخش در صفحه می شود و کاربر ارتباط بهتری با محتوا برقرار می کند پس اگر بتونید از المان آیکون به درستی استفاده کنید علاوه بر اینکه سایت خودتون رو جذاب تر می کنید کمک می کنید کابران تجربه بهتری از سایت شما داشته باشند.

آموزش کار با المان آیکون در المنتور

در این جلسه قصد داریم المان آیکون رو به صورت پروژه محور جلو ببریم تا شما عزیزان درک بهتری از این المان داشته باشید خب فرض کنید می خواهیم به صورت زیر المان های آیکون رو در کنار یک تصویر و در زیر یک جدا کننده استفاده کنیم

خب برای استفاده از این المان ها به این شکل همونطور که حدس زدید اول باید یک بخش داخلی اضافه کرد سپس اون رو به سه ستون تبدیل کرد یعنی بعد از اضافه کردن المان بخش داخلی باید روی ستون کلیک راست کرده و گزینه افزودن ستون جدید یا تکثیر رو انتخاب کنید تا سه عدد ستون داخل بخش داخلی اضافه شود.

در نهایت می تونید المان آیکون رو بکشید و داخل ستون ها قرار دهید و هر کدوم رو با توجه به نیاز یک آیکون مناسب برای آن انتخاب کنید برای اضافه کردن متن در زیر آیکون می تونید مثل این آموزش از المان سربرگ استفاده کنید و سایز آن را کوچک کنید.

آموزش افزودن آیکون به المنتور

یک نکته ای که وجود داره این هست که شما برای افزودن آیکون سفارشی نیاز دارید که افزونه المنتور پرو رو نصب کنید چون در نسخه رایگان این قابلیت وجود ندارد در ادامه می خواهیم در چند قدم اضافه کردن آیکون در المنتور رو به روش های مختلف توضیح دهیم

چگونه می تونم آیکون سفارشی در المنتور اضافه کنم ؟

دانلود فونت از سایت Fontello :

• به سایت http://fontello.com/ برو
• آیکون های خودتو انتخاب کن
• روی گزینه آچار کلیک کن و یک پیشوند CSS اضافه کن(یونیک باشه و قبلاً استفاده نشده باشه)
• برای فونتتون یک اسم انتخاب کنید
• دانلودش کنید
• برید به تنظیمات المنتور و از بخش آیکون های سفارشی آیکون خودتون رو آپلود کنید

دانلود فونت از سایت IcoMoon :

• به سایت https://icomoon.io/app برید
• آیکون های خودتون رو انتخاب کنید
• روی گزینه ‘Generate Font’ کلیک کنید
• دکمه Preferences رو فشار دهید
• یک نام برای فونتتون انتخاب کنید
• در زیر ‘Class prefix’ یک پیشوند یونیک انتخاب کنید
• روی گزینه X کلیک کنید تا به عقب برگردید
• فایل zip رو دانلود کنید
• در قسمت آیکون های سفارشی المنتور آپلود کنید

دانلود فونت از سایت flaticon :

• آیکون های خودتون رو از سایت flaticon دانلود کنید
• وارد سایت fontello.com شوید
• فایل های SVG آیکون هایی که دانلود کردید رو وارد این سایت کنید
• حالا آیکون هایی که نیاز دارید در پکیج اضافه شود رو انتخاب کنید
• یک نام برای فونت خودتون انتخاب کنید
• روی آیکون آچار کلیک کنید و از بخش CSS prefix یک پیشوند یکتا انتخاب کنید
• سپس فایل zip آیکون رو دانلود کنید
• فایل زیپ رو از بخش آیکون های سفارشی المنتور وارد کنید
• حالا از فونت های جدید خودتون استفاده کنید 🙂

نتیجه آموزش کار با المان آیکون در المنتور

خب دوستان عزیز در این جلسه نحوه آموزش کار با المان آیکون در المنتور رو یاد گرفتیم همچنین افزودن فونت به المنتور هم آموزش داده شد و متوجه شدیم که می تونیم از فونت های دیگری نیز استفاده کنیم ولی یک نکته ای که وجود داره این هست که سعی کنید زیاد فونت داخل سایتتون آپلود نکنید چون هرچی بیشتر فونت و آیکون داخل سایتتون آپلود و استفاده کنید باعث کندی سایتتون می شود.