آموزش استفاده از FontAwesome در صفحات وب

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

۳- چرخش آیکون

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

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

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

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

منبع:wikivb.ir