آموزش استفاده از آیکون فونت ( فونت آیکون) با Font Awesome

اگر یک طراح وب باشید، خوب میدانید که هنگام load یک صفحه وب، زمانی برای بارگذاری و خواندن تصاویر توسط مرورگر در نظر گرفته میشود که این باعث کاهش سرعت بارگزاری صفحه وب می گردد. شما میتوانید از فونت ها به جای آیکون ها استفاده کنید تا هم سرعت بارگزاری صفحه وب شما افزایش یابد و هم حجم سایتتان کاهش پیدا کند.

مزایای استفاده از آیکن فونت ها به جای تصاویر در صفحات وب :

  • تغییر سایز آیکون ها با استفاده از فونت سایز بدون افت کیفیت آیکن ( این مزیت در طراحی رسپانسیو که نیاز به استفاده از تصاویر کوچک تر برای نمایش بهتر در موبایل ها و تبلت ها دارید، بسیار کاربردی و مفید میباشد.)
  • تغییر رنگ آیکون با استفاده از استایل های css بدون استفاده از تصویر اضافی
  • امکان استفاده از سایه برای آیکون ها
  • نمایش آیکون در اکثر مرورگرها حتی ie7
  • استفاده از یک تصویر حتی در حالت hover
  • کاهش حجم فایل ها در صفحات وب و افزایش سرعت بارگزاری سایت

روش استفاده از فونت آیکون ها :

[free_vip]

  1. ابتدا از سایت Font-Awesome آخرین ورژن فونت ها را دانلود کنید. ( در انتهای همین مطلب کدهای ضروری که در فارسی برای فونت آیکن مورد استفاده قرار میگیرد را برای دانلود شما قرار داده ایم. )
  2. پوشه های مورد نیاز شما، پوشه fonts و css می باشند. آن ها را در پوسته خود قرار دهید.
  3. فایل css فونت آیکن (font-awesome.min.css) را در صفحه وب خود فراخوانی کنید. برای این کار میتوانید از تگ link استفاده کنید. تگ لینک را باید در بین تگ باز و بسته head قرار دهید.

    [html]
    <link href="fonts/font-awesome.min.css" rel="stylesheet" type="text/css">
    [/html]

    نکته : دقت کنید که در پوشه css، فایل سی اس اس به دو صورت فشرده و غیر فشرده وجود دارد. شما فقط یکی از این دو را در پوسته خود فراخوانی کنید و فایل دیگر را پاک کنید. همچنین توجه کنید که اگر فایل css را در جای دیگری قرار میدهید، مسیر فایل را در قسمت href تغییر دهید.

  4. در این مرحله میتوانید فونت آیکون را در جای مورد نظر خود قرار دهید. برای استفاده از فونت آیکن باید به تگ مورد نظر کلاس “fa” را بدهید.

    [html]
    <p class="fa fa-camera-retro"></p>
    [/html]

    نکته : آیکون فونت ها در هر تگی قابل استفاده هستند.

برای استفاده از آیکون های مختلف باید نام کلاس آن آیکون را نیز در تگ مورد نظر وارد کنید.

برای یافتن نام کلاس آیکون های دلخواهتان میتوانید به سایت Font-Awesome مراجعه کنید و بر روی آیکون مورد نظرتان کلیک کرده و نام کلاس آیکون را مانند تصویر زیر مشاهده کنید :

Array Array

نکات مهم فونت آیکون ها :

  • برای بزرگ کردن آیکون ها باید کلاس “fa-2x” را به تگ مورد نظر اضافه کنید.

    [html]
    <p class="fa fa-camera-retro fa-2x"></p>
    [/html]

    توجه داشته باشید که به جای ۲ میتوانید از یک عدد بین ۲ تا ۵ استفاده کنید .

  • برای اینکه آیکون ها به طور مداوم بچرخند، میتوانید کلاس “fa-spin” را به تگ مورد نظر اضافه کنید.

    [html]
    <p class="fa fa-camera-retro fa-spin"></p>
    [/html]

  • برای رنگ دادن به آیکون ها باید از CSS استفاده کنید و به تگ مورد نظر مشخصه color بدهید، چون آیکون های ما فونت هستند، میتوانید بصورت ۱۰۰ درصد با css به آن ها دسترسی داشته باشید.

شما میتوانید تمام قابلیت های فونت آیکون را در قسمت Examaples سایت اصلی فونت آیکون، مشاهده کنید که به صورت کاملا واضح و ساده توضیح داده شده است.

[onliner_button type=”edu-demo” url=’https://onliner.ir/demo-education/css/font-icon-onliner.ir.zip’]دانلود فایل های فونت آیکون[/onliner_button]

[/free_vip]

دیدگاه خود را برای ما ارسال کنید

10 Comments
    • حیبب
    • ۱۳۹۴-۰۶-۱۶
    پاسخ

    سلام
    ممنون از سایت خوبتون خیلی عالیه
    فقط لطفا بیشتر توضیح بدید که چجوری میشه برای آیکون ها رنگ و.. تایین کرد؟؟ من این کلاس رو در استایلش پیدا نمیکنم

      • حیبب
      • ۱۳۹۴-۰۶-۱۶
      پاسخ

      حالا فهمیدم باید کلاسش رو فراخونی کنم تو استایلم
      و حالا میشه هر خاصیتی براش تعریف کرد
      خیلی ممنون از شما

    • حمید
    • ۱۳۹۴-۰۷-۲۳
    پاسخ

    آقا دم شما خیلی گرم

    • sami
    • ۱۳۹۴-۰۸-۳۰
    پاسخ

    بسیار عالی… سپاس

    • yousefamini
    • ۱۳۹۵-۱۲-۱۹
    پاسخ

    سلام
    بنده میخام یک منو یا ایکون عین سایت شما برای خودم درست کنم .
    چطور میتونم همچین چزی درست کنم میشه راهنمایی بفرمایید .؟
    تشکر

      • سمیه شمس
      • ۱۳۹۶-۰۶-۲۶
      پاسخ

      سلام. آموزش های ساخت منو در فایل های آموزشی css رو مشاهده کنید.

    • mahdi yousefi
    • ۱۳۹۶-۰۱-۲۷
    پاسخ

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

  1. بسیار خوب بود
    تشکر

    • کافه کتاب
    • ۱۴۰۰-۰۶-۰۶
    پاسخ

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