تصویر امیر حسین اکبری
font Awesome

بجای استفاده از آیکون‌هایی به فرمت‌های PNG، GIF و ... تنها کافیست فونت مورد نظر را در قالب نام کلاسهایی هرجا که می‌خواهید وارد نمایید.

ویژگی ها

  • One Font, 302 Icons

این فونت مجموعه ای از 302 تا آیکون در قالب نام کلاس می باشد.

  • CSS Control

ویژگی‌هایی مانند اندازه، رنگ، سایه و ... را به راحتی می‌توانیم با استفاده از CSS به آیکون مورد نظر بدهیم.

  • IE7 Support
  • Made for Bootstrap

پیشنهاد شده برای استفاده در Bootstrapt.

  • Desktop Friendly

به جهت وکتور بودن آیکون‌ها پیشنهاد می گردد.

  • Free, as in Beer

این مجموعه تنها به منظور استفاده در Web Application ها طراحی شده است.

  • Infinite Scalability

هر اندازه! چون وکتوره.

  • Perfect on Retina Displays

برای نمایش در بالاترین Resolution ها مناسب می باشد.

  • Screen Reader Compatible

روش استفاده

ابتدا فونت را دانلود کنید سپس مانند فونت های دیگر به فایل HTML خود اضافه نمایید:

<link rel="stylesheet" href="css/font-awesome.css"> /*َADD Font to HTML*/

حال هرجا که میخواهید نام کلاس مربوط به فونت را  بیاورید:

<i class="icon-rss"></i> /*icon-rss*/

و در CSS خود بکار ببرید:

font-family: 'FontAwesome';

نمونه‌هایی از آیکون‌ها

 

برچسب ها: 

دیدگاه‌ها

تصویر سهیل

سهیل (تایید نشده)

سلام
در دروپال چطور میشه استفاده کرد

مرسی

تصویر امیر حسین اکبری

امیر حسین اکبری

بدین منظور بلاگ زیر را مطالعه نمایید:

نحوه استفاده از Font awesome در دروپال

تصویر امیر حسین اکبری

امیر حسین اکبری

سلام

این تکنیک ربطی به دروپال نداره و کافیه که کسی که UI کا میکنه با این تکنیک آشنا باشه و به جای استفاده از تصاویر با فرمت های رایج برای آیکون ها از روش بالا استفاده کنی.

همانطور که توضیخ دادم کافیه نام کلاس مربوطه به آیکون مورد نظر را در HTML وارد نمایی و در فایل CSS خود استایل مربوطه را وارد نمایی.

در انتها بعد از افزودن CSS به دروپال و هر CMS دیگری این ویژگی ها به UI خود افزوده می گردد.

تصویر Vahid

Vahid (تایید نشده)

من دنبال icomoon pro میگردم اگر کسی لینک داره بذاره ممنون میشم.

تصویر امیر حسین اکبری

امیر حسین اکبری

سلام

لینک مطلب خواسته شده : لینک وبسایت

افزودن نظر جدید