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

سلام به همه‌ی علاقه‌مندان المنتور!

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

در این مقاله قصد داریم به صورت کامل بررسی کنیم:

• اهمیت آیکون‌ها در طراحی وب‌سایت

• نحوه اضافه کردن آیکون در المنتور

• معرفی سایت IcoMoon و امکانات آن

• آموزش مرحله به مرحله ساخت مجموعه آیکون اختصاصی با IcoMoon

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

• نکات حرفه‌ای برای استفاده بهینه از آیکون‌ها در طراحی سایت

اهمیت آیکون‌ها در طراحی سایت

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

برخی از مهم‌ترین مزایای استفاده از آیکون‌ها:

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

• زیبایی بصری: آیکون‌ها ظاهر سایت را از یکنواختی خارج کرده و جذابیت بیشتری به صفحات می‌بخشند.

• بهبود تجربه کاربری (UX): با استفاده از آیکون‌ها مسیر دسترسی کاربران به بخش‌های مختلف ساده‌تر می‌شود.

• تقویت هویت برند: مجموعه‌ای منسجم از آیکون‌های سفارشی می‌تواند بخشی از هویت بصری برند شما باشد.

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

نحوه درج آیکون در المنتور

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

1. یک بخش (Section) جدید در صفحه ایجاد کنید.

2. ویجت آیکون (Icon Widget) را بکشید و در بخش موردنظر رها کنید.

3. در پنل تنظیمات، از بین آیکون‌های آماده المنتور گزینه‌ی دلخواه را انتخاب نمایید.

4. اندازه، رنگ، استایل و موقعیت آیکون را مطابق سلیقه خود تنظیم کنید.

5. تغییرات را ذخیره کنید.

این روش برای استفاده از آیکون‌های عمومی مناسب است. اما اگر بخواهید آیکون‌های خاص و اختصاصی برندتان را اضافه کنید، باید از ابزارهایی مانند IcoMoon استفاده کنید.

معرفی IcoMoon

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

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

• آیکون‌های اختصاصی خود را آپلود نمایید.

• یک مجموعه شخصی‌سازی شده بسازید.

• خروجی آیکون‌ها را به صورت فونت (Icon Font) یا SVG دانلود کنید.

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

آموزش مرحله به مرحله ساخت آیکون با IcoMoon

مرحله ۱: ورود به سایت

• وارد icomoon.io شوید.

• از منوی سمت راست، روی IcoMoon App کلیک کنید تا وارد محیط کاربری شوید.

مرحله ۲: افزودن آیکون‌ها

• روی گزینه Add Icons From Library… کلیک کنید.

• از میان کتابخانه‌های موجود، آیکون‌های رایگان را انتخاب نمایید (توجه: برخی آیکون‌ها پولی هستند).

• در صورت نیاز می‌توانید آیکون‌های اختصاصی خود را به صورت فایل SVG آپلود کنید.

مرحله ۳: انتخاب آیکون‌های موردنیاز

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

• در پایین صفحه و بخش Selection تعداد آیکون‌های انتخابی نمایش داده می‌شود.

مرحله ۴: ساخت مجموعه آیکون

• روی گزینه Generate Font کلیک کنید.

• در صفحه جدید می‌توانید:

  • نام مجموعه آیکون‌ها را تغییر دهید.

  • پیشوند CSS اختصاصی تعریف کنید.

  • ترتیب آیکون‌ها را تغییر دهید.

مرحله ۵: دانلود آیکون‌ها

• در نهایت روی دکمه Download کلیک کنید.

• یک فایل زیپ شامل فونت آیکون، CSS و نمونه کد HTML دانلود خواهد شد.

روش‌های افزودن آیکون‌های IcoMoon به وردپرس

پس از دانلود مجموعه آیکون‌ها، چند روش برای افزودن آن‌ها به سایت وردپرسی وجود دارد:

۱. استفاده از افزونه‌های مدیریت فونت آیکون

افزونه‌هایی مثل Custom Icons for Elementor یا Elementor Custom Icon Library به شما امکان می‌دهند فایل زیپ IcoMoon را بارگذاری کنید و مستقیماً در المنتور به آیکون‌ها دسترسی داشته باشید.

۲. آپلود دستی در قالب یا چایلد تم

• فایل زیپ IcoMoon را استخراج کنید.

• پوشه فونت‌ها را در قالب یا چایلد تم آپلود کنید.

• فایل CSS مربوط به آیکون‌ها را در فایل functions.php یا style.css فراخوانی کنید.

• حالا می‌توانید با استفاده از کلاس‌های CSS آیکون‌ها را در المنتور یا هر جای سایت استفاده نمایید.

۳. استفاده از فایل‌های SVG

IcoMoon به شما امکان می‌دهد آیکون‌ها را به صورت SVG نیز دانلود کنید. این فایل‌ها سبک و باکیفیت هستند و می‌توانید آن‌ها را مستقیماً در المنتور بارگذاری و درج کنید.

نکات حرفه‌ای برای استفاده از آیکون‌ها

• سادگی را حفظ کنید: استفاده بیش از حد از آیکون‌ها می‌تواند باعث شلوغی سایت شود.

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

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

• دقت در انتخاب: فقط آیکون‌هایی را انتخاب کنید که واقعاً به آن‌ها نیاز دارید تا حجم سایت بی‌دلیل بالا نرود.

جمع‌بندی

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

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

 

منبع : https://ofoghweb.com/insert-the-desired-icon-in-the-menu-from-the-icomoon-site