کتابخانه
@mdi/font بسته آماده وب فونت Material Design Icons هست که آیکون های اصلی و آیکون های جامعه کاربری رو توی یه فونت جمع کرده. با یه فایل CSS و چند کلاس ساده می تونی هزاران آیکون رو توی سایت وردپرسی یا هر پروژه وب نشون بدی، بدون اینکه برای هر آیکون یه تصویر جدا لازم باشه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز Apache-2.0؛ هش هر فایل با منبع بررسی شده است.
۴٫۶ مگابایت· ۱۰ فایل· انتشار
SHA-256: 03fe3caba05e65b14e4035139eee89b12be87cd0bcf342ac3886770eec3a9962
@mdi/font نسخه وب فونت مجموعه Material Design Icons هست که Austin Andrews ساخته. اگه تا حالا توی یه پنل مدیریت یا داشبورد آیکون های تخت و ساده ای مثل خانه، تنظیمات، سبد خرید یا زنگ اعلان دیدی، خیلی احتمال داره از همین خانواده بوده باشن. این بسته هم آیکون های اصلی (Stock) رو داره، هم آیکون های Community رو، و همه رو توی یه فونت جمع کرده.
طرز کارش ساده ست. یه فایل CSS داری و چند فایل فونت کنارش. هر آیکون یه کلاس داره و تو فقط یه تگ خالی با اون کلاس می ذاری. چون آیکون در واقع یه کاراکتر فونته، مثل متن رفتار می کنه: اندازه ش رو با font-size عوض می کنی، رنگش رو با color، و سایه و انیمیشن هم مثل هر متنی روش جواب می ده. برای همین توی منوها، دکمه ها، فرم ها و قالب های وردپرسی راحت جا می افته.
این بسته وقتی به درد می خوره که آیکون زیادی لازم داری. پنل مدیریت، قالب سفارشی، صفحه داشبورد یا یه فروشگاه با کلی دکمه و نماد از همین دسته ان. ولی اگه فقط سه چهار تا آیکون می خوای، لود کردن کل فونت صرف نمی کنه و بهتره همون چند تا رو به صورت SVG بذاری. فونت آیکون چند رنگ هم پشتیبانی نمی کنه، پس برای آیکون های چند رنگ این راه جواب نمی ده. اگه توی پروژه ای با Vue یا React کار می کنی، بسته های SVG و JS همین مجموعه (مثل @mdi/svg و @mdi/js) معمولا انتخاب بهتریه، چون فقط آیکون هایی که استفاده می کنی وارد پروژه می شن.
یه نکته مهم برای سایت های ایرانی: وقتی فایل های CSS و فونت رو روی هاست خودت می ذاری، دیگه به CDN خارجی وابسته نیستی و آیکون ها توی روزهایی که اینترنت بین الملل مشکل داره هم درست لود می شن. مجوز این بسته (Apache) معمولا استفاده توی پروژه های شخصی و تجاری رو راحت می کنه، فقط شرط های مجوز مثل نگه داشتن اطلاعیه ها رو رعایت کن. نسخه های رسمی و بدون تغییر @mdi/font توی مخزن داخلی ما هم در دسترسه. بعد از تست، همون نسخه ای که روی سایتت جواب داده رو ثابت نگه دار تا با تغییر اسم بعضی آیکون ها غافلگیر نشی.
برای استفاده لازم نیست چیز پیچیده ای نصب کنی. مراحل کلی این طوریه:
اگه بعد از آپلود آیکون ها دیده نشدن، اول توی تب Network مرورگر چک کن فایل های فونت با خطای ۴۰۴ برگشتن یا نه.
@mdi/font بسته وب فونت مجموعه Material Design Icons هست. Austin Andrews این مجموعه رو ساخته و الان جامعه Pictogrammers نگهداری ش می کنه. با Material Icons خود گوگل یکی نیست، حتی اگه سبک طراحی شون شبیه باشه. نام آیکون ها و کلاس ها هم فرق دارن، پس قاطی شون نکن.
معمولا مسیر فایل های فونت اشتباهه. مطمئن شو پوشه css و fonts با همون ساختار اصلی کنار هم آپلود شدن. بعدش توی تب Network مرورگر ببین درخواست فایل فونت خطای ۴۰۴ می گیره یا نه. بعد از جابه جایی فایل ها، کش مرورگر و کش افزونه های سرعت رو هم پاک کن.
مجوز این بسته از نوع Apache هست و معمولا استفاده تجاری رو اجازه می ده. فقط باید شرط های مجوز مثل نگه داشتن اطلاعیه ها و متن مجوز رو رعایت کنی. اگه پروژه ت حساسیت حقوقی خاصی داره، متن کامل مجوز رو که توی بسته هست یه بار خودت بخون.
اگه توی صفحه ها آیکون زیادی داری، یه فونت واحد که یه بار کش می شه راحت و منطقیه. اگه فقط چند آیکون لازم داری، SVG جدا سبک تره، چون لازم نیست کل مجموعه لود بشه. تصمیم رو بر اساس تعداد آیکون هایی بگیر که واقعا استفاده می کنی.
آره، همین کار رو بکن. فایل های css و fonts رو توی پوشه قالب یا افزونه خودت بذار و با wp_enqueue_style لود کن. این طوری سایتت به سرور خارجی وابسته نیست و وقتی اینترنت بین الملل مشکل داره هم آیکون ها بدون دردسر نمایش داده می شن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.