در این مطلب از مارکت فارسی قصد داریم تا راهنمای کامل فارسی دانلود و نصب جدیدترین Font Awesome 6 در پروژه ها و سایت ها را آموزش دهیم.
Font Awesome 6 در دو نسخه free و pro ارائه میشود.در این آموزش ما از نسخه free که بصورت رایگان ارائه میشود استفاده میکنیم.
اما کار با نسخه pro هم دقیقا مانند نسخه free است.
برای استفاده از نسخه رایگان این فونت آیکون میتوانید به وبسایت رسمی Font Awesome 6 رفته و مانند تصویر زیر روی دکمه Download Font Awesome Free for the Web کلیک کنید تا فایل این فونت آیکون دانلود شود.
فایل zip دانلود شده را باز کرده و وارد پوشه css شوید.، فایل all.css را کپی کرده و درون پوشه css پروژه خود paste کنید. سپس پوشه webfonts را کپی کرده و در کنار پوشه css پروژه خود paste کنید.
اگر مراحل بالا را درست انجام داده باشید در حال حاضر در فایل پروژه خود همچین ساختاری را مشاهده میکنید.
حال باید در هر یک از صفحاتی که قصد استفاده از آیکونهای Font Awesome 6 را در آن داریم فایل all.css را فراخوانی کنیم که اینکار با استفاده از تگ link انجام میشود. کافیست کد زیر را در عنصر head صفحه وب خود قرار دهید و آدرس فایل all.css را در خصیصه href تنظیم کنید.
<link href=”/your-path-to-fontawesome/css/all.css” rel=”stylesheet”>
شاید شما بخواهید فایلهای فونت Font Awesome را در مسیر دیگری جز مسیر گفته شده قرار دهید. اینکار یک مرحله به مراحل گفته شده در بالا اضافه میکند. در این مواقع علاوه بر کارهایی که تا اینجای آموزش انجام دادید، باید فایل all.css
را ویرایش کنید.
فایل all.css را با یک ویرایشگر کد (Code Editor) باز کنید و به خطوط پایانی بروید. همانطور که میبینید در انتهای این فایل با استفاده از دستور @
font-face
در CSS فونتهای مربوط به Font Awesome را فراخوانی کرده.
با استفاده از پارامتر src که درون دستورات
وجود دارد، میتوانید مسیر مورد نظر خود را برای فایلهای فونت تنظیم کنید.@
font-face
برای نمایش آیکونهای Font Awesome 6 در هرجایی از صفحه وب خود، میتوانید از تگ i
یا span
کمک بگیرید و از طریق خصیصه class برای انتخاب نوع آیکون استفاده کنید. به مثال زیر توجه کنید:
برای انتخاب آیکون در خصیصه class میتوان دو پیشوند پر کاربرد، fas
و far
، که پیشوند fas مخفف عبارت Font Awesome Solid و پیشوند far مخفف عبارت Font Awesome Regular است. این نشان دهنده این است که Font Awesome 6 دارای انواع آیکونهای Solid
و Regular
است که تفاوت آنها را با کمی دقت در آیکونهای مختلف این مجموعه، متوجه خواهید شد.
بعد از پیشوند میتوانید، نام آیکون مدنظر خود را بنویسید. نگران حفظ کردن نام آیکونها نباشید، چون اصلا نیازی نیست آنها را حفظ باشید! تنها کافیست روی دکمه زیر کلیک کرده تا لیست تمام آیکونهای Font Awesome 6 را مشاهده و از آنجا نام آیکون مدنظر خود را کپی کنید.
مشاهده آیکونهای Font Awesome 6
برای تغییر رنگ و سایز آیکون، میتوانید از ویژگی font-size و color استفاده کنید:
فونت آیکون Font Awesome 5 بصورت پیشفرض سایزهای از پیش تعریف شدهای برای آیکونها در نظر گرفته که برای استفاده از این سایزها کافی است از کلاسهای fa-xs ، fa-sm ، fa-lg و fa-2x تا fa-10x استفاده کنید:
برای جایگزینی نقطههای یک لیست نامرتب (ul) با فونت آیکون کافیست از کلاسهای fa-ul و fa-li استفاده کنید:
کلاس fa-spin هر آیکونی را به چرخش در میآورد. همچنین کلاس fa-pulse هر آیکونی را در 8 مرحله میچرخاند:
کلاسهای *-fa-rotate و *-fa-flip برای چرخش و معکوس کردن آیکونها استفاده میشوند:
دقیقا مانند حروف و کاراکترهای دیگر، آیکونهای مختلف هم دارای عرضهای متفاوتی هستند. اگر شما در مواقعی نیاز دارید که عرض مجموعهای از آیکونها باهم یکسان باشند، کافیست کلاس fa-fw را به آنها بدهید.
امیدوارم با استفاده از این آموزش بتوانید صفحات وب زیباتر و بهینهتری طراحی کنید. سوالات و مشکلات خود را از طریق دیدگاههای همین صفحه با ما در میان بگذارید.
دریافت مقاله راهنمای کامل فارسی دانلود و نصب جدیدترین Font Awesome 6 در پروژه ها و سایت ها به صورت مایکروسافت ورد