این بار با یک آموزش بسیار بدرد بخور اومدم پیشتون آموزش استفاده از فونت آیکون Font Awesome .

این فونت آیکونِ بسیار خوب و دوست داشتنی ، میشه گفت محبوب ترین فونت آیکون موجود در سطح نت هست . از خوبی های استفاده از فونت آیکون میشه به :

1. تغییر دادن سایز آیکون بدون هرگونه افت کیفیت
2. پشتیبانی از مرورگرهای قدیمی ( حتی IE7 )
3. حجم بسیار کم نسبت به استفاده از عکس
4. قابلیت استفاده از هاور بدون نیاز به استفاده از چند تصویر

ما توی این آموزش از Font Awesome استفاده میکنیم . خوب ، برای شروع به آدرس :

برید و دکمه Download رو بزنید .

ار بین فایل های دانلود شده، فولدر های css و fonts رو کپی کنید توی محل قالبتون .

حالا فایل font-awesome.min.css رو درون کد های head یا اگر از ویبولتین استفاده میکنید درون

<link rel="stylesheet" href="css/font-awesome.min.css">

و کپی کنید جایی که میخواید آیکون باشه . میتونید بجای i از هرتگی استفاده کنید ( از جمله div , p , a , li , …. )

حالا میریم سراغ بزرگ و کوچیک کردن و بعضی توضیحات دیگه .

1- تغییر سایز آیکون ها

برای بزرگتر کردن سایز آیکون ها جلوی اسم آیکون ( برای مثال fa-heart ) باید بنویسید :

fa-2x

که هرچه عدد 2 رو بزرگتر کنید آیکون بزرگتر میشه . در بزرگترین حالت هم تا 5 میره و اینطوری میشه مثلا :

<i class="fa fa-heart fa-5x"></i>

اما بعضی وقت ها نیاز میشه که آیکون رو بزرگتر کنید . برای این کار باید به آیکون Id بدید و توی کدهای سی اس اس سایز فونت رو بالا ببرید ، برای مثال :

<i id="heart" class="fa fa-heart fa-5x"></i>

و سپس در کد های سی اس اس تون قرار بدید :

.heart{   font-size: 20em;
}

2-تغییر رنگ / شادو ( سایه ) دادن

برای تغییر رنگ دادن هم باید از همین روش آی دی دادن استفاده کنید ،

اما مساله اینه که این روش با فونت استفاده میشه ( از اسمش معلومه دیگه ) ، پس باید مثل نوشته های بهش شادو و رنگ بدید . سی اس اس به این صورت میشه :

color : code-rang;
text-shadow: code-e-shadow;

3- چرخش آیکون

برای چرخش آیکون کافیه یه کد ساده رو اضافه کنید ، اونهم کد :

fa-spin

هست که کل کد به این صورت میشه برای مثال :

<i class="fa-li fa fa-spinner fa-spin"></i>

4- باقی مثال ها

کد های بسیار زیادی برای استفاده هرچه راحت تر و بهتر از فونت آیکون موجود هستند، میتوانید مثال ها را در این جا ببنیدید .

منبع:wikivb.ir