"Font Awesome" یا "فونتی از آیکونها" یا "آیکون فونت" چیست؟
يكشنبه, ۱۴ ارديبهشت ۱۳۹۳، ۱۰:۲۰ ق.ظ
Font Awesome، یک فونت است که شامل 369 آیکون وکتور شده و پرکاربرد در وب برای استفاده طراحان سایت می باشد(یا یک Iconic Fonts). این فونت در ایتدا برای استفاده در Twitter Bootstrap از سال 2012 وارد مخازن آن شد بعدها به صورت ابزاری جدا و مشخص در سایت http://fontawesome.io قرار گرفت تا مورد استفاده طراحان وب قرار گیرد . از ویژگی های مهم آن می توان به پشتیبانی از انواع مرورگرها حتی IE 7 اشاره کرد. اما ویژگی اصلی و مهم این ابزار سازگاری با css می باشد که قابلیتهای فرآوانی برای کاربرد به ان افزوده است.
از ویژگی های مهم این ابزار می توان موارد زیر را برشمرد :
- بی نیازی به جاوا اسکریپت برای استفاده
Scalability یا سازگاری با تغییرات سایز
- سازگاری با انواع نحوه نمایش بخصوص با نمایش در صفحه های Retina
- سازگاری با انواع دسترسی ها در مرور منابع از قبیل زوم یا حالت نمایش متن (در برخی ابزار با زوم کردن یا انجام فعالیتهایی از این دست کیفیت نمایش آیکون از بین می رود)
- سازگاری با انواع مرورگرها
- کنترل گامل از طریق css
- کدهای html ساده برای استفاده
نحوه استفاده از Font Awesome به صورت زیر می باشد :
بعد از دریافت بسته از سایت http://fontawesome.io/ و خارج کردن از حالت فشرده، در صفحه مورد نظر فایل font-awesome.css موجود در فولدر css را در صفحه قرار دهید
<link rel="stylesheet" href="./css/font-awesome.css">
یا برای استفاده از فایل کم حجم شده از
<link rel="stylesheet" href="./css/font-awesome.min.css">
پوشه fonts را در همان مسیری که پوشه css قرار دارد قرار دهید.
دقت ! : دقت کنید که آدرس داده شده در فایل css برای شناسایی فونت به همین صورت است در صورت تغییر مسیر ّfonts یا css آدرس فونت ها را تغییر دهید.
برای استفاده از کد زیر که به صورت پیشفرض برای تگ <i> آماده شده استفاده نمایید
<i class="fa fa-bell"></i><i class="fa fa-bell"></i>کلاسهای دیگر مورد استفاده در Font Awesome که می توانید در ادامه کلاس آیکون قراردهید :
- fa-fw : ثابت کننده طول آیکون
- fa-ul , fa-li : برای استفاده در لیست html به جای اشکال پیش فرض
-
: که برای چرخش آیکون به کار می رود fa-rotate-* , fa-flip-*
برای تغییر اندازه آیکونها: fa-lg , fa-2x, fa-3x, fa-4x , fa-5x
و ... که می توانید از سایت مرجع مشاهده نمایید.
