کتابخانه
font-awesome یه کتابخانه آیکون فونته که با یه فایل CSS و چند فایل فونت، صدها آیکون برداری رو بدون تصویر جدا توی سایتت می ذاره. هر آیکون یه تگ ساده با چند کلاسه و رنگ و اندازه اش رو هم با CSS عوض می کنی. به درد منو، دکمه، فرم و فوتر می خوره.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز (OFL-1.1 AND MIT)؛ هش هر فایل با منبع بررسی شده است.
۱٫۱ مگابایت· ۱۰ فایل· انتشار
SHA-256: 799aeb25cc0373fdee0e1b1db7ad6c2f6a0e058dfadaa3379689f583213190bd
قبل از آیکون فونت ها، هر آیکون یه تصویر جدا بود: یه PNG برای منو، یه PNG دیگه برای دکمه، و اگه می خواستی رنگش عوض بشه باید دوباره از طراح فایل می گرفتی. روی صفحه نمایش های تیز هم این تصویرها اغلب محو دیده می شدن. font-awesome همین دردسر رو حل می کنه. آیکون ها داخل یه فونت هستن و مثل متن رفتار می کنن: با font-size بزرگ و کوچک می شن، با color رنگ می گیرن و هر جا متن باشه، آیکون هم می تونه باشه.
این کتابخانه بیشتر به درد کسایی می خوره که قالب وردپرس، پنل مدیریت، لندینگ یا سایت شرکتی می سازن و یه مجموعه آیکون آماده و یکدست می خوان. خیلی از قالب ها و افزونه های قدیمی تر و پرکاربرد هم خودشون به این کتابخانه تکیه دارن. اگه جایی از سایتت به جای آیکون یه مربع خالی دیدی، معمولاً فایل فونت لود نشده، نه اینکه خود کتابخانه مشکل داشته باشه.
موقع انتخاب یه نکته رو حتماً در نظر بگیر: بسته font-awesome توی npm همون شاخه کلاسیک کتابخانه است. نسخه های جدیدتر Font Awesome با بسته های دیگه ای منتشر می شن و اسم کلاس ها و روش استفاده شون توی بعضی جاها فرق داره. پس اگه قالبت یه نسخه مشخص رو لود می کنه، بدون بررسی نسخه دیگه ای کنارش اضافه نکن. وگرنه هم حجم صفحه بالا می ره و هم ممکنه آیکون ها قاطی بشن. اگه فقط ده بیست تا آیکون لازم داری، یا روی کنترل دقیق SVG و دسترس پذیری حساسی، آیکون فونت انتخاب خوبی نیست، چون کل فونت رو لود می کنی.
توی شرایط ایران بهتره کتابخانه رو روی هاست خودت بذاری و سراغ CDN خارجی نری. اینطوری وقتی دسترسی به منابع بین المللی کند یا قطع می شه، آیکون های سایتت هم غیب نمی شن. مجوز بسته ترکیبی از OFL برای فونت و MIT برای کد و فایل های CSS است و برای پروژه های تجاری معمولاً مشکلی ایجاد نمی کنه. فقط بهتره متن مجوز رو توی فایل ها نگه داری.
نسخه های رسمی و بدون تغییر font-awesome توی مخزن داخلی ما هم هست، پس حتی وقتی اینترنت بین الملل مشکل داره می تونی فایل اصلی رو برداری و روی سایتت بذاری.
استفاده از font-awesome توی یه صفحه معمولی چند قدم بیشتر نیست:
اگه بعد از اضافه کردن، آیکون ها مربع نشون داده شدن، اول تب Network مرورگر رو باز کن و ببین فایل های فونت خطای 404 می دن یا نه. بعدش کش مرورگر و کش هاست یا CDN رو پاک کن.
تقریباً همیشه یعنی فایل فونت لود نشده. مسیر پوشه fonts نسبت به فایل CSS رو چک کن، چون اگه جابه جا شده باشه فونت پیدا نمی شه. بعدش ببین سرور یا فایروال جلوی فایل های فونت رو نگرفته باشه. خطاها توی تب Network مرورگر معلومه. کش رو هم یه بار پاک کن.
بهتره نه. اگه کتابخانه رو روی هاست خودت بذاری، به دسترسی منابع خارجی وابسته نیستی و سرعت بارگذاری هم معمولاً پایدارتره. وقتی اینترنت بین الملل کند یا قطع می شه، CDN خارجی ممکنه لود نشه و آیکون ها غیب بشن. فقط حواست باشه فایل CSS و پوشه fonts کنار هم بمونن تا مسیرها خراب نشن.
چون آیکون ها فونت هستن، با CSS معمولی کنترل می شن. رنگ رو با color و اندازه رو با font-size عوض کن. برای اندازه های آماده هم می تونی از کلاس هایی مثل fa-lg و fa-2x استفاده کنی. سایه و انیمیشن رو هم مثل متن می شه اضافه کرد.
اگه یه مجموعه آماده می خوای و کارت ساده است، آیکون فونت سریع و راحته. ولی اگه فقط چند آیکون لازم داری، یا کنترل دقیق شکل و دسترس پذیری برات مهمه، SVG منطقی تره. اینطوری مجبور نیستی کل فونت رو بارگذاری کنی.
مجوز بسته ترکیبی از OFL برای فونت و MIT برای کد است و معمولاً استفاده تجاری رو اجازه می ده. با این حال متن مجوز رو توی پروژه نگه دار. اگه قراره فونت رو تغییر بدی یا دوباره پخش کنی، شرایط مجوز رو دقیق بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.