پرداخت
سبد خرید : 0
پشتيباني : 09389373085
امروز پنجشنبه ۱۸ آذر ۱۳۹۵
تخفیف های روزانه تا 50% فقط با عضویت در کانال تلگرام سایت ! ورود به کانال x

آموزش استفاده از FontAwesome در صفحات وب - قالب خبری وردپرس | تابناک وب

منتشره شده در تیر ۱۱, ۱۳۹۵
آموزش استفاده از FontAwesome در صفحات وب

این بار با یک آموزش بسیار بدرد بخور اومدم پیشتون مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی آموزش استفاده از فونت آیکون Font Awesome .

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

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

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

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

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

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

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

 

کد:

 

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

 

 

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

 

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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

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

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

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

کد:

حتما بخوانید   مایکروسافت برای خرید یاهو وارد مذاکره با بخش خصوصی می شود

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

کد HTML:

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

کد HTML:

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

کد:

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

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

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

کد:

۳- چرخش آیکون

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

کد:

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

کد HTML:

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

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

حتما بخوانید   معرفی سایت اسکیمو

منبع:wikivb.ir



برچسب ها :
دیدگاه کاربران ۰
  • نظرات شما پس از بررسي و تاييد نمايش داده مي شود.
  • لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنيد.

css.php