کتابخانه
@fortawesome/fontawesome-free بسته رسمی npm برای نسخه رایگان Font Awesome است. یه مجموعه آیکون آماده که هم با فونت و CSS و هم با SVG و جاوااسکریپت توی سایت کار می کنه. برای منو، دکمه، فوتر، لینک شبکه های اجتماعی و هر جایی که آیکون لازم داری به کارت می آد.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز (CC-BY-4.0 AND OFL-1.1 AND MIT)؛ هش هر فایل با منبع بررسی شده است.
۲۱٫۹ مگابایت· ۵۸۱۳ فایل· انتشار
SHA-256: 48a4a4673692828b7d08216f969ed369b313a9aa93859de2b22bc5de09bff243
@fortawesome/fontawesome-free نسخه رایگان Font Awesome رو به شکل یه بسته npm در اختیارت می ذاره. مشکلی که حل می کنه ساده است: به جای اینکه برای هر آیکون یه عکس PNG بسازی و برای هر اندازه و رنگ دوباره بسازیش، آیکون رو با یه کلاس CSS یا یه SVG می ذاری و اندازه و رنگش رو از CSS کنترل می کنی. آیکون ها وکتورین، پس روی صفحه های با تراکم پیکسل بالا هم تیز می مونن.
توی بسته چند روش استفاده هست. ساده ترینش وب فونت و CSS هست: یه تگ می ذاری، کلاس سبک و نام آیکون رو بهش می دی و تموم. روش دوم SVG با جاوااسکریپته که آیکون ها رو به SVG تبدیل می کنه. فایل های SVG خام و فایل های SCSS و LESS هم کنارشون هست، برای پروژه هایی که با ابزار build کار می کنن. نسخه رایگان سبک های solid و brands رو داره و بخشی از سبک regular رو. بعضی آیکون هایی که روی سایت رسمی می بینی فقط توی نسخه Pro هستن، پس اگه آیکونی پیدا نشد، احتمالا مشکل از کدت نیست.
این بسته برای مدیر سایت وردپرسی که قالبش رو خودش شخصی سازی می کنه، برای توسعه دهنده فرانت و برای هر کسی که می خواد سریع یه رابط کاربری تمیز با آیکون های آشنا بسازه مناسبه. جایی که مناسب نیست، سایتیه که فقط دو سه آیکون لازم داره. اونجا بارگذاری کل مجموعه بی دلیله و بهتره فقط همون چند فایل SVG رو برداری. اگه هم سبک های Pro یا آیکون های خیلی خاص می خوای، نسخه رایگان جواب نمی ده.
یه نکته مخصوص سایت های ایرانی: اگه آیکون ها رو از یه CDN خارجی لود کنی، توی روزهای اینترنت محدود ممکنه سایتت بدون آیکون بالا بیاد و دکمه ها خالی بمونن. بهتره فایل ها رو روی هاست خودت بذاری. توی سایت راست به چپ هم فلش ها و آیکون های جهت دار رو حتما چک کن، چون ممکنه جهتشون با چیدمان صفحه جور نباشه و لازم بشه برعکسشون کنی. یه چیز دیگه هم این که خیلی از قالب ها و افزونه های وردپرس خودشون Font Awesome لود می کنن. قبل از اضافه کردن، سورس صفحه رو نگاه کن تا دو بار لود نشه.
مجوز این مجموعه ترکیبیه: آیکون ها CC BY، فونت ها OFL و کد MIT. توی فایل های بسته یه توضیح مجوز هست که بهتره پاکش نکنی. نسخه رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم هست و بدون وابستگی به اینترنت بین الملل می تونی دانلودش کنی.
کار با این بسته چند قدم بیشتر نداره و برای سایت وردپرسی و HTML ساده تقریبا یکیه:
بعد از نصب، صفحه رو یه بار با Ctrl+F5 باز کن. اگه به جای آیکون مربع خالی دیدی، تب Network مرورگر رو نگاه کن و ببین فایل های webfonts با خطای 404 لود شدن یا نه. معمولا مسیر پوشه اشتباهه.
نسخه رایگان فقط بخشی از آیکون ها و سبک ها رو داره: سبک solid، آیکون های برندها و بخشی از regular. نسخه Pro آیکون ها و سبک های بیشتری داره و اشتراک پولی می خواد. اگه آیکونی رو روی سایت رسمی دیدی و توی بسته رایگان پیداش نکردی، احتمالا مخصوص Pro هست.
نه، لازم نیست و بهتره هم نباشه. فایل های CSS و webfonts رو روی هاست خودت بذار تا آیکون ها حتی وقتی اینترنت بین الملل قطع یا کند شده، سریع و بدون وقفه لود بشن. فقط ساختار پوشه ها رو دست نزن، چون مسیر فونت ها بهش وابسته است.
معمولا یکی از این سه دلیله: پوشه webfonts کنار فایل CSS نیست یا مسیرش عوض شده، کلاس سبک مثل fa-solid رو ننوشتی، یا آیکونی رو صدا زدی که توی نسخه رایگان نیست. تب Network مرورگر خیلی سریع نشونت می ده کدوم فایل لود نشده.
بله، مجوز نسخه رایگان استفاده تجاری رو هم شامل می شه: آیکون ها CC BY، فونت ها OFL و کد MIT. فقط توضیح مجوزی که داخل فایل ها هست رو پاک نکن. برای جزئیات دقیق، متن رسمی مجوزها رو هم یه بار بخون.
نه. بیشتر قالب ها و افزونه ها خودشون لودش می کنن و اضافه کردن دوباره فقط حجم صفحه رو بالا می بره و گاهی باعث تداخل می شه. اول سورس صفحه رو نگاه کن. اگه فایل Font Awesome اونجا بود، همونو استفاده کن و چیزی اضافه نکن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.