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

خوشبختانه المنتورپرو این امکان را فراهم می‌کند تا آیکون‌های شخصی‌سازی شده و متناسب با طراحی سایتتان را به کتابخانه آیکون‌ها اضافه کنید.

مراحل اضافه کردن آیکون سفارشی به المنتور به‌طور خلاصه شامل موارد زیر است:

• ساخت یا دانلود آیکون یا پکیج آیکون با فرمت SVG
• تبدیل آیکون‌ها به فونت آیکون یا قابل استفاده در المنتور
• اضافه کردن فونت آیکون سفارشی به المنتور

اگر طراح سایت حرفه‌ای هستید و می‌خواهید سایت خود را نسبت به بقیه سایت‌ها متمایز کنید، این مقاله مناسب شماست. در این مقاله، به‌طور کامل و گام‌به‌گام، نحوه اضافه کردن آیکون‌های سفارشی به المنتورپرو را آموزش می‌دهیم.

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

همان‌طور که در ابتدای مقاله گفتیم، اولین مرحله برای افزودن آیکون سفارشی به المنتور، ساخت یا دانلود آیکون برای المنتور است. فرقی ندارد چه تعداد آیکون برای سایت نیاز دارید، نکته مهم این است که فرمت آیکون‌های دانلودی باید SVG باشد تا بتوانید به نسخه قابل خوانش یا استفاده در المنتور تبدیل کنید.

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

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

سایت دیگری که برای پیداکردن آیکون‌های موردنیاز شما می‌تواند مفید باشد، سایت iconsax.io می‌باشد. در این مقاله ما از امکانات این سایت برای اضافه کردن آیکون سفارشی به المنتور استفاده می‌کنیم.

دانلود آیکون‌های سفارشی

برای دانلود آیکن یا آیکون سفارشی از طریق مرورگر خود وارد سایت iconsax شوید. روی دکمه آبی رنگ download all v1.0 کلیک کنید. پوشه zip آیکون‌ها را جایی در دسکتاپ خود ذخیره کنید.

سپس وارد پوشه دانلودشده شوید و فایل zip آیکون را از حالت فشرده خارج کنید.

بعداز این‌که فایل zip را استخراج کردید، فولدر جدیدی ایجاد می‌شود. روی آن کلیک کنید.

همان‌طور که درتصویر زیر مشاهده می‌کنید، پکیج ایکون سفارشی در فرمت‌های مختلف وجود دارد. ما برای اضافه کردن آیکون سفارشی به المنتور تنها به محتویات درون پوشه  SVGنیاز داریم.

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

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

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

در مرحله بعد باید آیکون‌های سفارشی را از طریق سایت یا ابزارهایی که خود المنتور به شما پیشنهاد کرده است، تبدیل به فونت آیکون کنید. برای این کار 3 سایت Fontastic، Fontello.com و IcoMoon وجود دارند که برای تبدیل آیکون سفارشی به فونت آیکون و اضافه کردن به المنتور مورد استفاده قرار می‌گیرند.

ما در این مقاله از سایت icomoon.io استفاده می‌کنیم.

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

همان‌طور که گفتیم برای اضافه کردن آیکون سفارشی به المنتور باید آیکون‌ها را تبدیل به فونت آیکون کنید تا قابل نمایش در المنتور باشند.

برای این‌کار وارد سایت icomoon,io شوید و از بالای صفحه روی دکمه icomoon app کلیک کنید.

در این مرحله باید ابتدا آیکون‌هایی که در مراحل قبلی از سایت iconsax دانلود کردید را برای تبدیل به فونت آیکون سفارشی، آپلود کنید. به همین منظور از بالای صفحه روی دکمه import icons کلیک کنید، از بین حالت‌های مختلف، روی یکی از فولدرهای آیکن سفارشی کلیک کنید و تمامی آیکون‌ها با فرمت svg را انتخاب و آپلود کنید.

ما آیکون‌های فولدر outline را انتخاب کردیم.

بعداز آپلود آیکون‌های سفارشی طبق تصویر زیر روی سه‌خط کلیک کنید و گزینه select all را انتخاب کنید تا همه آیکون‌ها به‌صورت یکجا انتخاب شوند.

سپس از پایین صفحه روی دکمه Generate Font کلیک کنید. با زدن این دکمه، آیکون‌های سفارشی شما تبدیل به نسخه قابل استفاده در المنتور می‌شود.

طبق تصویر زیر تعداد 1793 آیکن سفارشی ایجاد شده است. با استفاده از چرخ‌دنده کنار دکمه Download، نام و کلاس پکیج آیکون خود را تغییر دهید. در انتها روی دکمه Download کلیک کنید.

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

بعد از انجام تمامی مراحل بالا، وارد پیشخوان وردپرس خود شوید. از مسیر المنتور>آیکن سفارشی وارد صفحه مربوط به اضافه کردن آیکون‌های سفارشی المنتور شوید.

از بالای صفحه روی دکمه افزودن مجموعه آیکون جدید کلیک کنید.

یک نام برای آیکون های خود انتخاب کنید و از بخش مرکزی فایل zip مربوط به فونت‌ آیکون‌های سفارشی را آپلود کنید. سپس روی دکمه بروزرسانی کلیک کنید.

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

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

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

نکته مهم این‌ است که این آیکون های سفارشی مانند آیکون‌های پیش‌فرض المنتور قابلیت تغییر رنگ و اندازه هم دارند.

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

آیکون‌های سفارشی شما باید با رنگ‌ها، فونت‌ها و سبک کلی طراحی سایت شما هماهنگ باشد. از آیکون هایی استفاده کنید که ساده و قابل فهم باشند تا کاربران سایت به‌راحتی بتوانند مفهوم آن‌ها را درک کنند.

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

نتیجه‌گیری

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

امیدواریم خواندن این مقاله برایتان مفید باشد.