وب باز

نوشته های یک طراح وب

وب باز

نوشته های یک طراح وب

"Font Awesome" یا "فونتی از آیکونها" یا "آیکون فونت" چیست؟

يكشنبه, ۱۴ ارديبهشت ۱۳۹۳، ۱۰:۲۰ ق.ظ

Font Awesom

Font Awesome، یک فونت است که شامل 369 آیکون وکتور شده و پرکاربرد در وب برای استفاده طراحان سایت می باشد(یا یک Iconic Fonts). این فونت در ایتدا برای استفاده در Twitter Bootstrap از سال  2012 وارد مخازن آن شد بعدها به صورت ابزاری جدا و مشخص در سایت http://fontawesome.io قرار گرفت تا مورد استفاده طراحان وب قرار گیرد . از ویژگی های مهم آن می توان به پشتیبانی از انواع مرورگرها حتی IE 7 اشاره کرد. اما ویژگی اصلی و مهم این ابزار سازگاری با css می باشد که قابلیتهای فرآوانی برای کاربرد به ان افزوده است.

از ویژگی های مهم این ابزار می توان موارد زیر را برشمرد :
  1. بی نیازی به جاوا اسکریپت برای استفاده
  2. Scalability یا سازگاری با تغییرات سایز

  3. سازگاری با انواع نحوه نمایش بخصوص با نمایش در صفحه های Retina
  4. سازگاری با انواع دسترسی ها در مرور منابع از قبیل زوم یا حالت نمایش متن (در برخی ابزار با زوم کردن یا انجام فعالیتهایی از این دست کیفیت نمایش آیکون از بین می رود)
  5. سازگاری با انواع مرورگرها
  6. کنترل گامل از طریق css
  7. کدهای 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>
برای تغییر تصویر فونت اسم آیکون fa-bell را تغییر دهید.

کلاسهای دیگر مورد استفاده در Font Awesome که می توانید در ادامه کلاس آیکون قراردهید :

  • fa-fw : ثابت کننده طول آیکون
  • fa-ul , fa-li : برای استفاده در لیست html به جای اشکال پیش فرض
  • : که برای چرخش آیکون به کار می رود    fa-rotate-* , fa-flip-*

  •  برای تغییر اندازه آیکونها:  fa-lg , fa-2x, fa-3x, fa-4x ,  fa-5x 

و ... که می توانید از سایت مرجع مشاهده نمایید.
  • موافقین ۱ مخالفین ۰
  • يكشنبه, ۱۴ ارديبهشت ۱۳۹۳، ۱۰:۲۰ ق.ظ
  • yamacasis

نظرات  (۱۱)

سلام
من از این فونت ها استفاده می کنم ولی وقتی آپلود می کنم به جای ایکون ها یک مربع توخالی میاره. مشکل چیه؟؟؟؟؟؟؟؟؟
کدهای استفاده از فونت شما مشکل داره فایلهای فونت آدرس دهی نمیشه
سلام دوست عزیز خیلی خیلی ممنون :)
با سلام
من که چیزی نفهمیدم
اگه میشه آموزش تصویریشو بذارین
خواهش میکنم
نیاز فوری دارم
ممنون میشم کمکم کنید
سلام و خسته نباشید 
من فونت رو اضافه کردم جواب میده اما پروژه را وقتی روی یه سیستم دیگه اجرا میکنم ایکن ها رو به صورت مربع نشون میده
عالی بود مرسی

"وحید " حتما در فرصت مناسب
"mina" احتمالا آدرس دهیتون مشکل داره اگر کدهاتون رو ببینم بهتر می تونم کمک کنم
سلام من هم ازاین دستورا استفاده کردم اما ایکن ها بصورت مربع میاد
ععععععععععععع ممنوووووووووووووون کد سی اس اس شمارو استفاده کردم درست شد
خدا خیرتون بده
ممنوووووووووووووووووووووووووووووووووووووووووووووووووووووووونم ازتون
ی دنیاااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااا <3 <3   ♥♥♥ :* :*
lمن یه فونت میخام برای پنل خورشیدی کد سی اس اس رو پیدا نکردم اگر کسی داره بده خیلی لازم دارم
پاسخ:
کد سی اس اس قرار دادن فونت فارسی رو می خوای؟
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
Mohamad Hassan Amirgani