چگونه در المنتور آیکون اضافه کنیم؟ (با معرفی سایت Fontastic)

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

1. استفاده از آیکون‌های آماده و/یا SVG در خودِ المنتور،

2. ساخت و درج آیکون‌های سفارشی با Fontastic و به‌کارگیری آن‌ها در صفحات.

چرا آیکون‌ها مهم‌اند؟

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

• بهبود تجربه کاربری (UX): پیمایش و یافتن اطلاعات را کوتاه‌تر و واضح‌تر می‌کند.

• زیبایی و نظم بصری: متن‌های طولانی را تکه‌تکه و خواناتر می‌کند؛ دکمه‌ها و بخش‌ها را جذاب‌تر می‌سازد.

• کمک غیرمستقیم به سئو: وقتی UX بهتر شود، ماندگاری کاربر افزایش و نرخ پرش کاهش می‌یابد.

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

روش ۱: استفاده از آیکون‌های آماده و/یا SVG در المنتور

• Icon Widget: ویجت «آیکون» را در صفحه بگذارید و از کتابخانه پیش‌فرض انتخاب کنید.

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

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

روش ۲: ساخت مجموعه آیکون سفارشی با Fontastic

این روش برای زمانی است که می‌خواهید هویت بصری یکپارچه داشته باشید (مثلاً آیکون‌های برند). خروجی Fontastic معمولاً یک فونت آیکون + فایل CSS است که می‌توان آن را در وردپرس/المنتور بارگذاری و استفاده کرد.

آموزش گام‌به‌گام: درج آیکون سفارشی در المنتور با Fontastic

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

1. وارد سایت Fontastic شوید و یک حساب کاربری بسازید.

2. از میان مجموعه‌ها، آیکون‌های مدنظر را انتخاب کنید.

3. هر زمان لازم بود، از گزینه Add More Icons آیکون‌های بیشتری بیفزایید.

مرحله ۲: شخصی‌سازی مجموعه (Modify Font)

1. به تب Modify Font بروید.

2. برای مجموعه یک نام بگذارید (مثلاً brand-icons).

3. یک پیشوند CSS تعریف کنید (مثلاً bi-) تا کلاس‌های شما نظم داشته باشد: bi-home, bi-phone و… .

4. ذخیره کنید (Save).

مرحله ۳: خروجی و دانلود

1. به تب Publish بروید.

2. روی Download کلیک کنید تا یک بسته فشرده دریافت کنید.
   این بسته معمولاً شامل:

   • فایل‌های فونت (.woff, .woff2, گاهی .ttf/.eot/.svg)

   • یک فایل CSS برای نگاشت نام کلاس‌ها به گلیف‌ها

مرحله ۴: بارگذاری فایل‌ها در وردپرس

سه راه رایج برای در دسترس قرار دادن فایل‌های فونت و CSS:

راه A – سفارشی‌ساز (Additional CSS) + آپلود فونت‌ها در رسانه/هاست

• فونت‌ها را در یک پوشه‌ی منظم (مثلاً /wp-content/uploads/icons/fontastic/) آپلود کنید.

• مسیرها را در @font-face داخل CSS به همان پوشه اشاره دهید و CSS را در نمایش > سفارشی‌سازی > CSS اضافی قرار دهید.

راه B – افزونه‌های مدیریت CSS/کد

• از یک افزونه معتبر «مدیریت کد/CSS» استفاده کنید.

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

راه C – چایلد تم (Child Theme)

• فایل‌های فونت را داخل پوشه‌ای مثل /child-theme/assets/fonts/fontastic/ بگذارید.

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

نکته: فرمت WOFF2 را در اولویت بگذارید (سبک‌تر و سریع‌تر). WOFF را به عنوان پشتیبان نگه دارید.

 

در اکثر خروجی‌های Fontastic، فایل CSS آماده‌ی نگاشت کلاس‌ها به content همراه بسته دانلود می‌شود. کافی‌ست همان فایل را درج/لود کنید و مسیر فونت‌ها را تنظیم نمایید.

بهترین پرکتیک‌ها (Best Practices)

عملکرد و سرعت

• WOFF2 را اولویت دهید؛ اندازه کم و سرعت لود بالا.

• اگر مجموعه بزرگی دارید، فقط گلیف‌های لازم را نگه دارید (subsetting) تا وزن فونت کاهش یابد.

• از preload برای فایل‌های حیاتی محتاطانه استفاده کنید؛ فقط اگر آیکون‌ها در Above-the-fold واقعاً لازم‌اند.

طراحی و ثبات برند

• یک سبک بصری یکپارچه برای آیکون‌ها انتخاب کنید (ضخامت خط، گوشه‌ها، نسبت‌ها).

• اندازه، فاصله و رنگ آیکون‌ها را در کل سایت یکسان نگه دارید (Design System کوچک برای آیکون‌ها بسازید).

دسترس‌پذیری

• اگر آیکون صرفاً تزئینی است: aria-hidden="true" را اضافه کنید تا توسط صفحه‌خوان‌ها نادیده گرفته شود.

• اگر آیکون نقش معنایی دارد: متن جایگزین قابل‌دسترسی بگذارید (label مجاور یا متن پنهان).

نگهداری و مقیاس‌پذیری

• کلاس‌ها را با پیشوند مشخص (مثل bi-) تعریف کنید تا برخورد نام‌ها کمتر شود.

• مسیر فایل‌ها و نام فونت را مستند کنید تا در بروزرسانی قالب/هاست به‌هم نریزد.

مقایسه روش‌ها

ویژگی/روش	آیکون‌های آماده/آپلود SVG در المنتور	Fontastic (فونت آیکون سفارشی)
سرعت شروع کار	بسیار سریع	متوسط (نیاز به یک‌بار تنظیم)
یکنواختی بصری در مقیاس بزرگ	متوسط	بالا
کنترل کامل روی نام‌گذاری کلاس‌ها	محدود	عالی
عملکرد و بهینه‌سازی وزن	خوب با SVGهای سبک	بسیار خوب با WOFF2 + Subset
سادگی استفاده برای مبتدی‌ها	بسیار ساده	کمی فنی‌تر
وابستگی به کد/CSS	کم تا متوسط	متوسط تا زیاد

رفع اشکال (Troubleshooting)

مشکل رایج	دلیل احتمالی	راه حل کوتاه
آیکون به‌جای شکل، مربع/جعبه خالی است	فونت لود نشده یا مسیر اشتباه است	مسیر فونت‌ها در CSS را تصحیح کنید؛ کش مرورگر/کش سایت را خالی کنید.
آیکون نمایش می‌شود اما به‌هم‌ریخته است	تعارض CSS یا فونت اشتباه	font-family را روی کلاس آیکون‌ها !important کنید.
آیکون‌ها دیر ظاهر می‌شوند	فونت سنگین/بدون کش	از WOFF2 و کش مرورگر استفاده کنید؛ در صورت لزوم subset بسازید.
آیکون با متن تراز نیست	line-height یا vertical-align نامناسب	برای آیکون line-height:1 و vertical-align:middle بگذارید.

پرسش‌های پرتکرار

آیا می‌توانم آیکون Fontastic را در «Icon Widget» المنتور ببینم؟
به‌صورت پیش‌فرض کتابخانه آیکون المنتور Font Awesome است. آیکون‌های Fontastic به‌عنوان فونت کلاس‌محور اضافه می‌شوند؛ بنابراین ساده‌ترین استفاده از آن‌ها در ویجت HTML یا با کلاس سفارشی + CSS است.

SVG بهتر است یا فونت آیکون؟
برای آیکون‌های تک/کم‌تعداد و نیاز به کنترل دقیق (رنگ، انیمیشن)، SVG عالی است. برای مجموعه‌های بزرگ و یکپارچه، فونت آیکون با WOFF2 و Subset کارآمدتر است.

با بروزرسانی قالب/افزونه، آیکون‌ها می‌پرند؟
اگر مسیرها را در پوشه‌ای مستقل (مثل uploads/icons/) نگه دارید و CSS را در جایی پایدار ثبت کنید، مشکلی پیش نمی‌آید. مستندسازی مسیرها فراموش نشود.

جمع‌بندی

• اگر سرعت و سادگی می‌خواهید، از کتابخانه پیش‌فرض المنتور + SVG‌های ایمن استفاده کنید.

• اگر هویت برند و یکنواختی در مقیاس بزرگ برایتان مهم است، مجموعه‌ی Fontastic بسازید: فونت‌های WOFF2 را لود کنید، کلاس‌ها را با پیشوند منظم تعریف کنید و از طریق HTML/کلاس‌های سفارشی در المنتور به‌کار بگیرید.

• با رعایت اصول عملکرد، دسترس‌پذیری و یکپارچگی بصری، آیکون‌ها به‌جای یک تزئین ساده، به ابزاری راهبردی برای UX و برند شما تبدیل می‌شوند.

منبع : https://ofoghweb.com/insert-the-icon-in-the-menu-introduce-the-fontastic-site/