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

[Mr.Gadatas 103]

با سلام و درود

 

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

 

 

 

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

 

 

 

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

 

 

 لینک ها تنها برای اعضای سایت قابل نمایش است.  

 

 

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

 

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

 

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

headinclude_bottom لینک کنید . به این صورت :

 

 

<link rel="stylesheet" href="https://go.20script.ir/index.php?url=css/font-awesome.min.css">

 

 

 

حالا برای استفاده کردن از آیکون ها کافیه به این صفحه برید :

 

 

 لینک ها تنها برای اعضای سایت قابل نمایش است.  icons/

 

 

 

و روی آیکونی که میخواید کلیک کنید . مثلا من روی آیکون قلب توپر ( ) کلیک کردم . شما باید مثل عکس زیر کد آیکون رو انتخاب کنید :

 

 

 

 

 

 

و کپی کنید جایی که میخواید آیکون باشه . میتونید بجای 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;}

 

 

 

منبع

 

ویکی ویبی

 

نویسنده: لینک ها تنها برای اعضای سایت قابل نمایش است.

 

باتشکر

[irmacfa 20]

آقا اگر ایکون های جدید بیاد براش چطور اپدیت کنیم؟

 

مثلا من تلگرامو میخوام ولی بسته ای ک داخل سایتمه تلگرامو شناسایی نمیکنه