فونت آیکون چیست + دانلود آیکون فونت Font Awesome

فونت آیکون چیست ؟

یکی از روش های نمایش آیکون و المان های گرافیکی مورد استفاده در رابط کاربری سایت استفاده از فونتی می باشد که به جای نمایش اعداد و حروف چندین آیکون را به نمایش می گذارد به این فونت ها ، فونت آیکون (Icon Font) می گویند. استفاده از فونت آیکون مزایا و معایبی دارد اگر بخواهیم مزایای آن را نام ببریم می توانیم به افزایش سرعت بارگذاری صفحات وب در سایتهای سنگین و بزرگ، امکان تغییر اندازه راحت فونت ها در طراحی سایت واکنشگرا و صفحه نمایش های دارای اندازه متفاوت، تغییر رنگ راحت و سریع نسبت به استفاده از تصویر ، تعریف چند اندازه پیشفرض با استفادهاز کلاس css و … را نام برد از معایب آن نیز می توان به شناخت و آگاهی طراح رابط کاربری و گرافیست وب از آیکونهای موجود در فونت ایکون ، محدود بودن آیکون ها ، سنگین بودن و حجم بالای فونت آیکون ها در سایتهای سبک و کوچک ، تجاری بدون اکثر فونت آیکونهای موجود و … را نام برد. در میان انواع تجاری و غیر رایگان این نوع فونت های وب نسخه ای با نام Awesome به صورت رایگان و متن باز در سایت github قرار گرفته که می توانید از آن استفاده کنید برای دانلود آیکون فونت Font Awesome با روناک وب همراه باشید.

فونت آیکون چیست + دانلود آیکون فونت Font Awesome

آیکون فونت رایگان Font Awesome

تعداد آیکونهای این مجموعه بیش از ۵۸۵ مورد می باشد که در موضوعاتی مانند : برنامه های وب ، شبکه های اجتماعی ، فرم ها ، پخش کننده موسیقی و فیلم ، حمل و نقل ، نمودار و چارت ، آیکون های ادیتور متنی ، ایکون پرداخت و بانکها ، موسسات و شرکتهای معتبر وب و برند ، بیمارستان و سلامت و … را نام برد.

برای استفاده از جدیدترین نسخه آیکون فونت ابتدا باید آنرا از صفحه Font Awesome در جیت هاب دانلود کنید و شیوه نامه آنرا درست شبیه به فراخوانی فایل style.css در صفحه وب تان فراخوانی کنید، در این مرحله باید به آدرس دهی آیکون فونتها در فایل css دقت کنید تا فونتها به درستی لود شوند سپس می توانید با مراجعه به صفحه examples چندین نمونه از نحوه استفاده از فونتها را مشاهده کنید همچنین با مراجعه به صفحه icons می توانید کلاس آیکون ها را ببینید که با کلیک بر روی هر آیکون آموزش نحوه فراخوانی آن در صفحه را مشاهده کنید.

1,851 بازدید 9 نظر
خیلی خوشم اومد.
به نظر من !!!
  1. مهدی می گه:
    ۱۴:۴۴ مورخه ۱۹ بهمن ۹۴

    سلام من css رو فراخوانی کردم ولی شبیح مربع شد مشکل کجاست

    • روناک وب می گه:
      ۱۵:۵۱ مورخه ۱۹ بهمن ۹۴

      سلام. بررسی کنید آدرس دهی فونتها درست باشه، احتمالا مشکل در فراخوانی فونت هست

  2. مهدی می گه:
    ۲۳:۰۷ مورخه ۱۹ بهمن ۹۴

    ممنون از راهنمایی شما مشکلم حل شد

  3. علی می گه:
    ۲۳:۱۴ مورخه ۲۰ بهمن ۹۴

    سلام ممنون از آموزش شما برای قرار دادن ایکون در css از کجا کد رو پیدا کنیم
    منظورم
    :{ before { content: “\00BB”;

    • روناک وب می گه:
      ۲۳:۳۹ مورخه ۲۰ بهمن ۹۴

      سلام. نام ایکون مورد نظر رو داخل فایل css فونت ایکون جستجو کنید. برای اینکار ctrl+f رو بزنید و اسم ایکون رو بگردید بعد کدش رو بردارید و داخل css خودتون استفاده کنید.

      • علی می گه:
        ۱۶:۵۶ مورخه ۲۱ بهمن ۹۴

        ممنون بایت جواب شما .ولی کد رو قرار میدم شیبح مربع میشه ولی این کد قرار میدم درست میشه اشکال کجاست اگه جواب بدید ممنون میشم .

        • روناک وب می گه:
          ۱۰:۱۸ مورخه ۲۲ بهمن ۹۴

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

  4. اردلان می گه:
    ۰۶:۲۱ مورخه ۲۹ مرداد ۹۵

    سلام چه طور میشه آیکون اعداد رو بهش اضافه کرد؟
    با تشکر

    • روناک وب می گه:
      ۱۵:۴۷ مورخه ۲۹ مرداد ۹۵

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

با عضوت در خبرنامه ایمیلی جدیدترین مطالب و فیلم های آموزشی را در ایمیل تان دریافت کنید. اعضاء خبرنامه و صفحات اجتماعی روناک وب از امکانات ویژه ای برخوردار خواهند شد !!!