آموزش استفاده از FontAwesome در صفحات وب
این بار با یک آموزش بسیار بدرد بخور اومدم پیشتون آموزش استفاده از فونت آیکون Font Awesome .
این فونت آیکونِ بسیار خوب و دوست داشتنی ، میشه گفت محبوب ترین فونت آیکون موجود در سطح نت هست . از خوبی های استفاده از فونت آیکون میشه به :
- تغییر دادن سایز آیکون بدون هرگونه افت کیفیت
- پشتیبانی از مرورگرهای قدیمی ( حتی IE7
)
- حجم بسیار کم نسبت به استفاده از عکس
- قابلیت استفاده از هاور بدون نیاز به استفاده از چند تصویر
ما توی این آموزش از Font Awesome استفاده میکنیم . خوب ، برای شروع به آدرس :
برید و دکمه Download رو بزنید .
ار بین فایل های دانلود شده، فولدر های css و fonts رو کپی کنید توی محل قالبتون .
حالا فایل font-awesome.min.css رو درون کد های head یا اگر از ویبولتین استفاده میکنید درون
headinclude_bottom لینک کنید . به این صورت :
۱ |
<link rel="stylesheet" href="css/font-awesome.min.css"> |
حالا برای استفاده کردن از آیکون ها کافیه به این صفحه برید :
و روی آیکونی که میخواید کلیک کنید . مثلا من روی آیکون قلب توپر ( ) کلیک کردم . شما باید مثل عکس زیر کد آیکون رو انتخاب کنید :
و کپی کنید جایی که میخواید آیکون باشه . میتونید بجای i از هرتگی استفاده کنید ( از جمله div , p , a , li , …. )
حالا میریم سراغ بزرگ و کوچیک کردن و بعضی توضیحات دیگه .
۱- تغییر سایز آیکون ها
برای بزرگتر کردن سایز آیکون ها جلوی اسم آیکون ( برای مثال fa-heart ) باید بنویسید :
۱ |
fa-۲x |
که هرچه عدد ۲ رو بزرگتر کنید آیکون بزرگتر میشه . در بزرگترین حالت هم تا ۵ میره و اینطوری میشه مثلا :
۱ |
<i class="fa fa-heart fa-5x"></i> |
اما بعضی وقت ها نیاز میشه که آیکون رو بزرگتر کنید . برای این کار باید به آیکون Id بدید و توی کدهای سی اس اس سایز فونت رو بالا ببرید ، برای مثال :
۱ |
<i id="heart" class="fa fa-heart fa-5x"></i> |
و سپس در کد های سی اس اس تون قرار بدید :
۱ ۲ |
.heart{ font-size: ۲۰em; } |
۲-تغییر رنگ / شادو ( سایه ) دادن
برای تغییر رنگ دادن هم باید از همین روش آی دی دادن استفاده کنید ،
اما مساله اینه که این روش با فونت استفاده میشه ( از اسمش معلومه دیگه ) ، پس باید مثل نوشته های بهش شادو و رنگ بدید . سی اس اس به این صورت میشه :
۱ ۲ |
color : code-rang; text-shadow: code-e-shadow; |
۳- چرخش آیکون
برای چرخش آیکون کافیه یه کد ساده رو اضافه کنید ، اونهم کد :
۱ |
<span style="color: #d44950;">fa-spin</span> |
هست که کل کد به این صورت میشه برای مثال :
۱ |
<i class="fa-li fa fa-spinner fa-spin"></i> |
۴- باقی مثال ها
کد های بسیار زیادی برای استفاده هرچه راحت تر و بهتر از فونت آیکون موجود هستند، میتوانید مثال ها را در این جا ببنیدید .
منبع:wikivb.ir