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

آموزش اضافه کردن آیکون های سفارشی در المنتور
Share on twitter
Share on facebook
Share on telegram
Share on whatsapp

با استفاده از ویژگی آیکون های سفارشی در المنتور پرو قادر خواهید بود آیکون های دلخواه خود را به صفحات سایت تان اضافه کنید. همچنین می توانید از آیکون های Fontello, Icomoon یا Fontastic و کتابخانه آیکون برای کارهای خود استفاده کنید ما در این مقاله نحوه کار با هر دو روش را به شما آموزش می دهیم با ما همراه باشید.

ساختن مجموعه آیکون (فونت) برای استفاده در المنتور

استفاده از Fontello

  1. به آدرس http://fontello.com/ مراجعه کنید.
  2.  تعدادی از آیکون ها را انتخاب کنید و یا اینکه فایل SVG آیکون سفارشی خودتان را آپلود نمایید.
  3.  روی آیکون آچار کلیک نمایید و یک پیشوند CSS اضافه نمایید. اطمینان حاصل کنید که منحصر به فرد باشد.
  4. در کادر font nameیک نام برای آیکون های سفارشی وارد کنید.
  5. روی دکمه دانلود کلیک نمایید تا آیکون های سفارشی شما به صورت فایل Zipدانلود شوند.
  6. فایل های SVG آن را دانلود کنید.

استفاده از IcoMoon

  1. به آدرس https://icomoon.io/app مراجعه کنید.
  2. تعدادی از آیکون ها را انتخاب کنید و یا اینکه فایل SVG آیکون سفارشی خودتان را با کلیک روی دکمه import iconsn آپلود نمایید.
  3. روی تب ‘Generate Font’ کلیک نمایید
  4. روی دکمه Preferences کلیک نمایید.
  5. یک نام برای فونت خود وارد نمایید.
  6. در کادر Class prefix یک پیشوند برای آیکون های خود وارد نمایید.
  7. روی دکمه خروج x کلیک نمایید.
  8. روی دکمه Download کلیک نمایید تا فایل زیپ آیکون های شما دانلود شود.

استفاده از Fontastic

  1. یک حساب کاربری در Fontastic ایجاد کنید.
  2. تعدادی از آیکون ها را انتخاب نمایید یا آیکون های مورد نظر خود را وارد نمایید.
  3. برای وارد کردن منوی بالا روی Add More Icons کلیک نمایید.
  4. روی تب ‘Modify Font’ کلیک نمایید.
  5.  یک نام برای آیکون ها وارد نمایید.
  6. یک پیشوند CSS منحصر به فرد برای مجموعه آیکون خود وارد نمایید.
  7. روی دکمه Save کلیک نمایید.
  8.  به تب ‘Publish’ بروید
  9. روی دکمه Download کلیک نمایید تا مجموعه آیکون شما دانلود شود.

نصب مجموعه آیکون های سفارشی در المنتور

برای اینکه فایل مجموعه آیکون های سفارشی در المنتور وارد و نصب نمایید طبق مراحل زیر عمل کنید:

  1.  به المنتور > آیکون های سفارشی – Custom Icons بروید.
  2. روی دکمه افزودن جدید – Add New کلیک نمایید.
    3- یک نام برای مجموعه آیکون خود وارد نمایید
    4- فایل آیکون های سفارشی را آپلود نمایید.
    5- روی دکمه به روزرسانی – Update کلیک نمایید.
    6- حالا شما می توانید آیکون های سفارشی در المنتور را به همراه پیشوند css در صفحه آیکون های سفارشی مشاهده کنید.

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


کتابخانه آیکون المنتور

علاوه بر آیکون های سفارشی در المنتور، کتابخانه آیکون هم امکان دسترسی به بیش از 1500 آیکون رایگان Font Awesome 5 را فراهم می کند و یک رابط کاربری برای مدیریت آیکون ها در اختیار شما قرار می دهد.

نحوه دسترسی به کتابخانه آیکون در المنتور

برای اینکه به کتابخانه آیکون المنتور دسترسی پیدا کنید لازم است که بر روی دکمه کتابخانه آیکون –Icon Library که در هر ابزارکی با تنظیم کردن دکمه آن نمایان می شود کلیک نمایید.

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

پس از بازشدن کتابخانه، آیکون های مرتبط با آیکون انتخابی شما به طور خودکار نمایش داده می شود، اما اگر خواستید می توانید در کل کتابخانه جستجو کنید تا آیکون مورد نظرتان را سریعتر پیدا کنید. در این صفحه دو قسمت به شرح زیر وجود دارد:

  1. فیلتر آیکون ها بر اساس نام – Filter Icons By Name: با جستجو آیکون ها براساس کلمه کلیدی در کادر جستجو می توانید سریعتر آیکون های موردنظرتان را بیابید.
  2. فیلتر آیکون ها بر اساس دسته بندی – Filter Icons By Name : آیکون ها را بر اساس دسته بندی های عادی – یکپارچه- برندها فیلتر کنید.

سرعت و کارایی

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

به روزرسانی به Font Awesome 5

المنتور ورژن 2.6 کتابخانه آیکون خود را معرفی می کند که شامل به روزرسانی به کتابخانه Font Awesome 5 است. هنگامی که برای اولین بار سعی در استفاده از کتابخانه آیکون می نمایید، ممکن است با یک پاپ آپ مهاجرت به Font Awesome همانند تصویر زیر روبه رو شوید.

اخطار Elementors New Icon Library در المنتور

این پنجره به شما می گوید که در نسخه 2.6 به بعد المنتور از Font Awesome 4 به Font Awesome 5 به روز رسانی شده است و آیکون های سفارشی در المنتور به بیش از 1500 عدد رسیده است به همین دلیل ممکن است برخی از طراحی های آیکون های FA4 در هنگام به روز رسانی به FA5 تغییر کرده باشند.

هنگامی که روی به روزرسانی – Update کلیک می کنید به صفحه المنتور < ابزارها – Tools منتقل می شوید. ( نگران نباشید، کار شما به صورت خودکار ذخیره شده است):

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

در صفحه باز شده به شما هشدار می دهد که با کلیک کردن بر روی دکمه Upgrade to Font Awesome 5 دیگر برگشت به نسخه قبلی امکان پذیر نیست.
در صورتی که موافق هستید، روی دکمه Upgrade to Font Awesome 5 کلیک نمایید، پس از کلیک کردن یک پاپ آپ دیگر ظاهر می شود که برای آخرین بار به شما می گوید که این عمل غیر قابل برگشت است، برای تایید آن روی دکمه Continue کلیک نمایید تا به صفحه ای که با آن کار می کردید هدایت شوید.

اخطار Font Awesome 5 Migration در هنگام اضافه کردن آیکون های سفارشی در المنتور
پس از این کارها به روزرسانی تکمیل می شود و شما می توانید از کتابخانه جدید آیکون در هر ابزارکی که دارای امکان کنترل آیکون است استفاده کنید.
نکته: به مسیر المنتور > تنظیمات – 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 معرفی شد که دارای آیکون های بیشتر، سرعت بیشتر، فونت های مختلف و …است.

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
Share on facebook

دریافت مقالات ناب

مقالات شبیه مقالات بالا رو هر هفته میفرستیم به ایمیلتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سوالی داری؟ چت با واتساپ