آموزش استفاده از فونت آیکون Font Awesome 5 در صفحات وب


نویسنده:
چهارشنبه 23 بهمن 1398
آموزش استفاده از Font Awesome 5

در مقالات گذشته در رابطه با فونت آیکون و کاربرد و مزیت استفاده از آنها در صفحات وب صحبت کردیم. در این مطلب قصد داریم تا نحوه استفاده از فونت آیکون Font Awesome 5 در صفحات وب را آموزش دهیم.

Font Awesome 5 در دو نسخه free و pro ارائه می‌شود. امروز که ما در حال نوشتن این مقاله هستیم، یعنی ۲۳ بهمن ۹۸، آخرین ورژن این فونت آیکون 5.12.1 است که در نسخه free دارای 1557 آیکون و در نسخه pro دارای 7722 آیکون است که به جرات می‌توان گفت کامل‌ترین فونت آیکون موجود در بازار است.

در این آموزش ما از نسخه free که بصورت رایگان ارائه می‌شود استفاده می‌کنیم. اما کار با نسخه pro هم دقیقا مانند نسخه free است.

نصب Font Awesome 5

برای استفاده از نسخه رایگان این فونت آیکون می‌توانید به وبسایت رسمی Font Awesome 5 رفته و مانند تصویر زیر روی دکمه Download Font Awesome Free for the Web کلیک کنید تا فایل این فونت آیکون دانلود شود.

دانلود font Awesome 5 از وبسایت رسمی آن

فایل zip دانلود شده را باز کرده و وارد پوشه css شوید.، فایل all.css را کپی کرده و درون پوشه css پروژه خود paste کنید. سپس پوشه webfonts را کپی کرده و در کنار پوشه css پروژه خود paste کنید.

اگر مراحل بالا را درست انجام داده باشید در حال حاضر در فایل پروژه خود همچین ساختاری را مشاهده می‌کنید.

  • css (پوشه)
    • all.css (فایل)
    • دیگر فایل‌های css پروژه
  • Webfont (پوشه)
    • فایل‌های فونت

حال باید در هر یک از صفحاتی که قصد استفاده از آیکون‌های Font Awesome 5 را در آن داریم فایل 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 5

برای نمایش آیکون‌های Font Awesome 5 در هرجایی از صفحه وب خود، می‌توانید از تگ i یا span کمک بگیرید و از طریق خصیصه class برای انتخاب نوع آیکون استفاده کنید. به مثال‌ زیر توجه کنید:

مثال اول Font Awesome 5

برای انتخاب آیکون در خصیصه class می‌توان دو پیشوند به کار برد، fas و  far، که پیشوند fas مخفف عبارت Font Awesome Solid و پیشوند far مخفف عبارت Font Awesome Regular است. این نشان دهنده این است که Font Awesome 5 دارای انواع آیکون‌های Solid و Regular است که تفاوت آنها را با کمی دقت در آیکون‌های مختلف این مجموعه، متوجه خواهید شد.

بعد از پیشوند می‌توانید، نام آیکون مدنظر خود را بنویسید. نگران حفظ کردن نام آیکون‌ها نباشید، چون اصلا نیازی نیست آنها را حفظ باشید! تنها کافیست روی دکمه زیر کلیک کرده تا لیست تمام آیکون‌های Font Awesome 5  را مشاهده و از آنجا نام آیکون مدنظر خود را کپی کنید.

تغییر رنگ و سایز آیکون‌ها

برای تغییر رنگ و سایز آیکون، می‌توانید از ویژگی font-size و color استفاده کنید:

مثال دوم Font Awesome 5

سایز های از پیش تعریف شده

فونت آیکون Font Awesome 5 بصورت پیشفرض سایز‌های از پیش تعریف شده‌ای برای آیکون‌ها در نظر گرفته که برای استفاده از این سایزها کافی است از کلاس‌های fa-xs ، fa-sm ، fa-lg و fa-2x تا fa-10x استفاده کنید:

مثال سوم Font Awesome 5

آیکون‌های لیست

برای جایگزینی نقطه‌های یک لیست نامرتب (ul) با فونت آیکون‌ کافیست از کلاس‌های fa-ul و fa-li استفاده کنید:

مثال چهارم Font Awesome 5

آیکون‌های متحرک

کلاس fa-spin هر آیکونی را به چرخش در می‌آورد. همچنین کلاس fa-pulse هر آیکونی را در 8 مرحله می‌چرخاند:

مثال پنجم Font Awesome 5

چرخش و معکوس کردن آیکون‌ها

کلاس‌های *-fa-rotate و *-fa-flip برای چرخش و معکوس کردن آیکون‌ها استفاده می‌شوند:

مثال ششم Font Awesome 5

آیکون‌های عرض یکسان

دقیقا مانند حروف و کاراکتر‌های دیگر، آیکون‌های مختلف هم دارای عرض‌های متفاوتی هستند. اگر شما در مواقعی نیاز دارید که عرض مجموعه‌ای از آیکون‌ها باهم یکسان باشند، کافیست کلاس fa-fw را به آنها بدهید.

مثال هفتم Font Awesome 5

امیدوارم با استفاده از این آموزش بتوانید صفحات وب زیباتر و بهینه‌تری طراحی کنید. سوالات و مشکلات خود را از طریق دیدگاه‌های همین صفحه با ما در میان بگذارید.

مطالب زیر را حتما بخوانید

روش افزودن دکمه پرینت وب‌سایت

افزودن دکمه پرینت به سایت در وب‌سایت‌های آموزشی یا فروشگاهی برای چاپ رسید خرید یا بلیت بسیار کاربردی است.

2 روش افزودن تصویر به منو وردپرس که باید درباره آن بدانید!!

در این مقاله سعی داریم به طور کلی به 2 روش افزودن تصویر به منو وردپرس بپردازیم. همانطور که می‌دانید...

Emmet چیست؟ چگونه کدهای HTML و CSS را سریع‌تر بنویسیم؟

Emmet یک ابزار برای توسعه‌دهندگان وب است که می‌تواند سرعت نوشتن کد‌های HTML و CSS را تا حد بسیار زیادی...

سابلایم تکست (Sublime Text) چیست؟ + بررسی مزایا و معایب آن

در این مقاله از وبلاگ ادمین سایت، به معرفی یک ادیتور کد ساده و سبک می‌پردازیم که برای برنامه نویسان...

دیدگاهتان را بنویسید

29 پاسخ به “آموزش استفاده از فونت آیکون Font Awesome 5 در صفحات وب”

  1. مهسا گفت:

    عالی بود ممنون بابت محتوای کاربردی که گذاشتید

  2. نوید گفت:

    سلام، چجوری میشه از این فونت در ReactJS هم استفاده کرد؟

  3. محمد گفت:

    سلام من همه کار ها رو درست انجام دادم اما بجای آیکون یک مربع خالی نشون میده

  4. نسیم گفت:

    سلام
    ممنون از آموزشتون، فقط کاش کدها به صورت عکس نبودن تا بشه به راحتی مپیشون کرد

  5. امیر گفت:

    سلام خودم هم می تونم بسازم؟

  6. سینا گفت:

    سلام. واقعا ازتون ممنونم. بدجور توش گیر کرده بودم. خیلی ممنونم. پس باید تمام فرمت فونت هایی که خود font awsome توی فایل دانلود شده قرار داده تو پروژه بزاریم. درسته؟ یعنی فقط این فایل ها باید تو پروژه باشه:
    all.min.css
    و تمام محتویات پوشه webfont

  7. حنا گفت:

    سلام واقعا بابت مطلب مفیدتون ممنونم

  8. ... گفت:

    سلام چرا نمیتونم از ایکون های برند استفاده کنم؟

  9. علی ملکی گفت:

    واقعا خوب توضیح دادین ممنون ازتون

  10. مسعود گفت:

    عالی بود، خیلی ممنون

  11. فائزه گفت:

    میخام کد باشه که سبک تر باشه

  12. فائزه گفت:

    سلام برای استفاده از ایکون ها در ووردپرس باید چیکار کرد؟

  13. محمد صادق گفت:

    سلام من نسخه pro رو دارم ولی ایکون های پرو اصلا اجرا نمیشن ولی ایکون های رایگان اجرا میشن
    اگه میشه راهنماییم کنید ممنون

    • سلام محمد صادق جان
      معمولا مشکل عدم نمایش آیکون ها در آدرس دهی فایل‌های فونت هستش. اول باید مطمعن بشید فایل CSS مربوط به فراخوانی فونت‌ها کاملا درست به صفحه HTML اضافه شده. در قدم بعدی باید آدرس‌های دستور font-face که در فایل CSS وجود داره رو بررسی کنید.
      اگر این دو مورد کاملا درست باشه، هیچ مشکلی درنمایش فونت‌ها وجود نداره

  14. علی گفت:

    سلام از اینجا کپی نکن مسیر و دستی ادرس بده میاد

  15. هستی گفت:

    رو باید توی تگ هد بگدارم ؟
    یا این؟

  16. هستی گفت:

    سلام با اینکه این مسیر رو گداشتم تو کدها ولی ایکنی نشون نمیده چرا؟

    • سلام دوست عزیز
      نمایش ندادن آیکون‌ها به این دلیله که آدرس فایل all.css رو درست وارد نکردید.
      بازم چک کنید همه چیزو اگر درست نشد، فایل پروژه رو بصورت یک فایل zip به پشتیبانی واتساپ بفرستید تا بررسی بشه.
      موفق باشید.

  17. توحید گفت:

    بسیار عالی ممنون از مطلب مفیدتون

  18. امیروف گفت:

    خوب بود

دیدگاهتان را بنویسید