host3nter

آموزش استفاده از FontAwesome در صفحات وب ( اختصاصی ویکی وی بی )

باسلام و 2رودی دِگَر بار :دی حالتون خوبه ؟ دماغتون چاقه ؟ :| :دی این بار ...

موضوع آموزش استفاده از FontAwesome در صفحات وب ( اختصاصی ویکی وی بی ),.

HTML, ویبولتین, ویکی وی بی

تاريخ ارسال:2014/08/13

هاست سنتر باسلام و 2رودی دِگَر بار :دی حالتون خوبه ؟ دماغتون چاقه ؟ :| :دی این بار با یک آموزش بسیار بدرد بخور اومدم پیشتون :دی آموزش استفاده از فونت آیکون Font Awesome . این فونت آیکونِ بسیار خوب و دوست داشتنی ، میشه گفت محبوب ترین فونت آیکون موجود در سطح نت هست . از خوبی های استفاده از فونت آیکون میشه به : تغییر دادن سایز آیکون بدون هرگونه افت کیفیتپشتیبانی از مرورگرهای قدیمی ( حتی IE7 :| :دی )حجم بسیار کم نسبت به استفاده از عکسقابلیت استفاده از هاور بدون نیاز به استفاده از چند تصویر ما توی این آموزش از Font Awesome استفاده میکنیم . خوب ، برای شروع به آدرس : نقل قول: http://fortawesome.github.io/Font-Awesome/ برید و دکمه Download رو بزنید . ار بین فایل های دانلود شده، فولدر های css و fonts رو کپی کنید توی محل قالبتون . حالا فایل font-awesome.min.css رو درون کد های head یا اگر از ویبولتین استفاده میکنید درون headinclude_bottom لینک کنید . به این صورت : کد: <link rel="stylesheet" href="css/font-awesome.min.css"> حالا برای استفاده کردن از آیکون ها کافیه به این صفحه برید : نقل قول: http://fortawesome.github.io/Font-Awesome/icons/ و روی آیکونی که میخواید کلیک کنید . مثلا من روی آیکون قلب توپر ( :دی ) کلیک کردم . شما باید مثل عکس زیر کد آیکون رو انتخاب کنید : و کپی کنید جایی که میخواید آیکون باشه . میتونید بجای i از هرتگی استفاده کنید ( از جمله div , p , a , li , .... ) حالا میریم سراغ بزرگ و کوچیک کردن و بعضی توضیحات دیگه . 1- تغییر سایز آیکون ها برای بزرگتر کردن سایز آیکون ها جلوی اسم آیکون ( برای مثال fa-heart ) باید بنویسید : کد: fa-2x که هرچه عدد 2 رو بزرگتر کنید آیکون بزرگتر میشه . در بزرگترین حالت هم تا 5 میره و اینطوری میشه مثلا : کد HTML: <i class="fa fa-heart fa-5x"></i> اما بعضی وقت ها نیاز میشه که آیکون رو بزرگتر کنید . برای این کار باید به آیکون Id بدید و توی کدهای سی اس اس سایز فونت رو بالا ببرید ، برای مثال : کد HTML: <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 هست که کل کد به این صورت میشه برای مثال : کد HTML: <i class="fa-li fa fa-spinner fa-spin"></i> 4- باقی مثال ها کد های بسیار زیادی برای استفاده هرچه راحت تر و بهتر از فونت آیکون موجود هستند، میتوانید مثال ها را در این جا ببنیدید . این آموزش اختصاصی ویکی وی بی هست ، لطفا فقط با ذکر منبع و لینک دادن به این مطلب کپی کنید :x موفق باشید :x هاست,دامین,سایت,وب,طراحی

تغغیر دامنه و اشکال در لود شدن انجمن

هاست پرسرعت و ارزان نیک وب

تفاوت مای بی بی با وی بی

قرمز رنگ کردن نام یک زیر انجمن ؟؟؟

قرمز رنگ کردن نام یک زیر انجمن ؟؟؟

سوال درباره سرعت بازگذاری و …

کلیدی ترین نکات یک لوگو

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

آموزش استفاده از FontAwesome در صفحات وب ( اختصاصی ویکی وی بی )

میزبانی وب ,هاست,فضای وب,ویندوز,لینوکس,دات نت,پی اچ پی,web hosting,windows host,linux host,asp.net,php,sql server,mysql میزبان پایتخت ارائه دهنده خدمات میزبانی وب، هاست و هاستینگ، میزبانی هاست، دامین، میزبانی نمایندگی، نمایندگی وب، سرور مجازی و سرور مجازی ابری می باشد.هاست,میزبانی وب,دامین,سرور مجازی,میزبان پایتخت,host,domain,vps,mizban paytakht,hosting,share hosting,میزبان وب,میزبانی هاست,هاستینگ

google
logo-samandehi