با استفاده از ویژگی آیکون های سفارشی در المنتور پرو قادر خواهید بود آیکون های دلخواه خود را به صفحات سایت تان اضافه کنید. همچنین می توانید از آیکون های Fontello, Icomoon یا Fontastic و کتابخانه آیکون برای کارهای خود استفاده کنید ما در این مقاله نحوه کار با هر دو روش را به شما آموزش می دهیم با ما همراه باشید.
ساختن مجموعه آیکون (فونت) برای استفاده در المنتور
استفاده از Fontello
- به آدرس http://fontello.com/ مراجعه کنید.
- تعدادی از آیکون ها را انتخاب کنید و یا اینکه فایل SVG آیکون سفارشی خودتان را آپلود نمایید.
- روی آیکون آچار کلیک نمایید و یک پیشوند CSS اضافه نمایید. اطمینان حاصل کنید که منحصر به فرد باشد.
- در کادر font nameیک نام برای آیکون های سفارشی وارد کنید.
- روی دکمه دانلود کلیک نمایید تا آیکون های سفارشی شما به صورت فایل Zipدانلود شوند.
- فایل های SVG آن را دانلود کنید.
استفاده از IcoMoon
- به آدرس https://icomoon.io/app مراجعه کنید.
- تعدادی از آیکون ها را انتخاب کنید و یا اینکه فایل SVG آیکون سفارشی خودتان را با کلیک روی دکمه import iconsn آپلود نمایید.
- روی تب ‘Generate Font’ کلیک نمایید
- روی دکمه Preferences کلیک نمایید.
- یک نام برای فونت خود وارد نمایید.
- در کادر Class prefix یک پیشوند برای آیکون های خود وارد نمایید.
- روی دکمه خروج x کلیک نمایید.
- روی دکمه Download کلیک نمایید تا فایل زیپ آیکون های شما دانلود شود.
استفاده از Fontastic
- یک حساب کاربری در Fontastic ایجاد کنید.
- تعدادی از آیکون ها را انتخاب نمایید یا آیکون های مورد نظر خود را وارد نمایید.
- برای وارد کردن منوی بالا روی Add More Icons کلیک نمایید.
- روی تب ‘Modify Font’ کلیک نمایید.
- یک نام برای آیکون ها وارد نمایید.
- یک پیشوند CSS منحصر به فرد برای مجموعه آیکون خود وارد نمایید.
- روی دکمه Save کلیک نمایید.
- به تب ‘Publish’ بروید
- روی دکمه Download کلیک نمایید تا مجموعه آیکون شما دانلود شود.
نصب مجموعه آیکون های سفارشی در المنتور
برای اینکه فایل مجموعه آیکون های سفارشی در المنتور وارد و نصب نمایید طبق مراحل زیر عمل کنید:
- به المنتور > آیکون های سفارشی – Custom Icons بروید.
- روی دکمه افزودن جدید – Add New کلیک نمایید.
3- یک نام برای مجموعه آیکون خود وارد نمایید
4- فایل آیکون های سفارشی را آپلود نمایید.
5- روی دکمه به روزرسانی – Update کلیک نمایید.
6- حالا شما می توانید آیکون های سفارشی در المنتور را به همراه پیشوند css در صفحه آیکون های سفارشی مشاهده کنید.
کتابخانه آیکون المنتور
علاوه بر آیکون های سفارشی در المنتور، کتابخانه آیکون هم امکان دسترسی به بیش از 1500 آیکون رایگان Font Awesome 5 را فراهم می کند و یک رابط کاربری برای مدیریت آیکون ها در اختیار شما قرار می دهد.
نحوه دسترسی به کتابخانه آیکون در المنتور
برای اینکه به کتابخانه آیکون المنتور دسترسی پیدا کنید لازم است که بر روی دکمه کتابخانه آیکون –Icon Library که در هر ابزارکی با تنظیم کردن دکمه آن نمایان می شود کلیک نمایید.
پس از بازشدن کتابخانه، آیکون های مرتبط با آیکون انتخابی شما به طور خودکار نمایش داده می شود، اما اگر خواستید می توانید در کل کتابخانه جستجو کنید تا آیکون مورد نظرتان را سریعتر پیدا کنید. در این صفحه دو قسمت به شرح زیر وجود دارد:
- فیلتر آیکون ها بر اساس نام – Filter Icons By Name: با جستجو آیکون ها براساس کلمه کلیدی در کادر جستجو می توانید سریعتر آیکون های موردنظرتان را بیابید.
- فیلتر آیکون ها بر اساس دسته بندی – Filter Icons By Name : آیکون ها را بر اساس دسته بندی های عادی – یکپارچه- برندها فیلتر کنید.
سرعت و کارایی
کتابخانه آیکون المنتور عملکردی سریع دارد و موجب می شود که صفحه وب سایت شما سرعت سریعتری داشته باشد و در هنگام لود شدن صفحات تنها CSS و فونت ها که از آن استفاده می کنید بارگیری می شوند که این خود باعث بهبود رتبه سئو و سرعت بارگذاری صفحه می شود.
به روزرسانی به Font Awesome 5
المنتور ورژن 2.6 کتابخانه آیکون خود را معرفی می کند که شامل به روزرسانی به کتابخانه Font Awesome 5 است. هنگامی که برای اولین بار سعی در استفاده از کتابخانه آیکون می نمایید، ممکن است با یک پاپ آپ مهاجرت به Font Awesome همانند تصویر زیر روبه رو شوید.
این پنجره به شما می گوید که در نسخه 2.6 به بعد المنتور از Font Awesome 4 به Font Awesome 5 به روز رسانی شده است و آیکون های سفارشی در المنتور به بیش از 1500 عدد رسیده است به همین دلیل ممکن است برخی از طراحی های آیکون های FA4 در هنگام به روز رسانی به FA5 تغییر کرده باشند.
هنگامی که روی به روزرسانی – Update کلیک می کنید به صفحه المنتور < ابزارها – Tools منتقل می شوید. ( نگران نباشید، کار شما به صورت خودکار ذخیره شده است):
در صفحه باز شده به شما هشدار می دهد که با کلیک کردن بر روی دکمه Upgrade to Font Awesome 5 دیگر برگشت به نسخه قبلی امکان پذیر نیست.
در صورتی که موافق هستید، روی دکمه Upgrade to Font Awesome 5 کلیک نمایید، پس از کلیک کردن یک پاپ آپ دیگر ظاهر می شود که برای آخرین بار به شما می گوید که این عمل غیر قابل برگشت است، برای تایید آن روی دکمه Continue کلیک نمایید تا به صفحه ای که با آن کار می کردید هدایت شوید.
پس از این کارها به روزرسانی تکمیل می شود و شما می توانید از کتابخانه جدید آیکون در هر ابزارکی که دارای امکان کنترل آیکون است استفاده کنید.
نکته: به مسیر المنتور > تنظیمات – Settings > پیشرفته – Advanced بروید و مطمئن شوید که گزینه پشتیبانی از Font Awesome 4 روی حالت بله – Yes باشد تا در هنگام استفاده از Font Awesome 5، آیکون های نسخه Font Awesome 4 همچنان به درستی نمایش داده شوند.
نکته : اگر شما به FA5 به روزرسانی نکنید، ابزارک های که از آیکون های FA4 استفاده کرده اند همچنان به کار خود ادامه می دهند، اما شما نمی توانید آن را ویرایش کنید.
لیست ابزارک های المنتور که از کتابخانه آیکون استفاده می کنند
• ابزارک دکمه – Button ( نسخه رایگان)
• ابزارک آکاردئون – Accordion ( نسخه رایگان)
• ابزارک جعبه آیکون – Icon Box ( نسخه رایگان)
• ابزارک لیست آیکون – Icon List ( نسخه رایگان)
• ابزارک آیکون – Widget ( نسخه رایگان)
• ابزارک تغییر وضعیت – Toggle ( نسخه رایگان)
• ابزارک آیکون های شبکه های اجتماعی – Social Icons ( نسخه رایگان)
• ابزارک فراخوانی برای اقدام – Call to Action (نسخه پریمیوم)
• ابزارک بررسی – Reviews (نسخه پریمیوم)
• جعبه فلیپ – Flip (نسخه پریمیوم)
• ابزارک فرم – Form (نسخه پریمیوم)
• ابزارک جدول قیمت – Price Table (نسخه پریمیوم)
• ابزارک اطلاعات پست – Post Info (نسخه پریمیوم)
جالب است بدانید :
FA4 در سال 2013 شروع به کار کرد که از 675 آیکون استفاده کرده بود و FA5 در سال 2017 معرفی شد که دارای آیکون های بیشتر، سرعت بیشتر، فونت های مختلف و …است.
2 پاسخ
سلام. آیا فقط فونت آیکون های سایت های icomoon ، fontello و fontastic رو میشه وارد المنتور کرد؟
چون من هر کاری کردم نتونستم وفنت آیکون سایتهای دیگر رو وارد کنم. راهی داره؟
توی بخش پشتیبانی درخواست بدید تا توی نسخه های جدید آیکون های بیشتر اضافه کنیم