معرفی و آموزش استفاده از Font Awesome در قالب (آیکن های متنی )

 

معرفی و آموزش استفاده از Fort Awesome

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

قبل از هر چیزی میگیم Font Awesome چیست ؟

دوستان قبلا اگر از ورد استفاده کردین که هیچی اگه نکردین برین سراغ ورد و فونت windings رو انتخاب کنید متوجه میشید که نوشته ها بصورت ایکن نمایش داده میشن . کاربرد فونت اوی سوم در این مسئله هست که آیکن های زیبا بصورت فونت قابل طراحی در وبسایت ما باشند. این قابلیت بسیار کاربردی است زیرا اگه بخوایم از عکس ها و آیکن های عکسی در طراحی وبسایت استفاده کنیم مسلما دست ما تنگ تر در طراحی خواهد شد  و در نتیجه در آخر کار میبینیم در یک طراحی حدود ۶۰ آیکن بکار بردیم که حجم آنها بالاست و کیفیت کافی را ندارند.

شما با ایمپورت چند فایل در پوسته خود یا با معرفی یک لینک استایل به پوسته میتونین از تمامی آیکن های فونت اوی سوم در قالب خودتون استفاده کنید.

آموزش استفاده از Font Awesome در قالب یا پوسته :

خب ما با تشکری سخاوتمندانه از وبسایت و کارگزارن بوت استرپ MaxCDN برای راحت تر کردن ما برای استفاده از فونت اوی سوم در راحتی استفاده در پوسته . MaxCDN همه ی فایل ها و کد ها و فونت های مورد نیاز فونت اوی سوم را در یک خط برا استفاده راحت تر و سریع تر قرار داده .


 

برای استفاده و نمایش آیکن ها در پوسته شما باید این خط کد رو به html  قالبتون اضافه کنید :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
 rel="stylesheet">

پس از اضافه کردن کد بالا به پوسته  ( فرقی نمیکنه کجا بزارین  تو <head> 
بزارین بهتره برای سرعت لود بیشتر )
به سراغ نحوه استفاده میریم
حلا چندین روش مورد استفاده قرار میگیره 
شما برای استفاده باید کلاس ایکن ها رو داشته باشید

برای دریافت کد آیکن ها بر کلیک کنید 
پس از دریافت و پیدا کردن آیکن مورد نظر برای استفاده به شکل زیر عمل میکنیم:
<i class="fa fa-camera-retro"></i> fa-camera-retro


به این روش ما الان از کد کمرا ( دوربین) برای نمایش آیکن دوربین استفاده کردیم

کد های ایکن ها در حالت عادی و معمولی در ریز ترین حالت خود قرار دارن حال اگه ما کلاس های fa-lg و fa-2x و fa-3x و fa-4x و fa-5x استفاده کنیم به ترتیب معرفی اندازه های استفاده بزرگتر میشن و تا ۵ برابر نیز قابلیت استفاده دارند.

حالا برای بزرگ شدن ایکن یک نمونه استفاده میکنیم از فا ۳ ایکس استفاده کردیم که نمونشو میبینید عکس دوربین ۳ برابر شد

<i class="fa fa-camera-retro fa-3x"></i>


خب با گزینه های بالا ما به سایز دلخواهمون رسیدیم حالا اگه میخواین رنگ این ایکن های فونتی رو تغییر بدین باید رنگ فونت کلاسی class=”test”که از این آیکین در اون استفاده میکنید تغییر بدین به هر رنگی که میخواین .

حال اگه بخواین ایکن متحرک باشه باید کلاس fa-spin رو به همون خط اضافه کنید

مثل این کد

<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>

 

  • as bullets

میبینید چ زیباست برای کار های  در حال انجام ایکن های جالبی میشن




خب همچنین شما میتونین این ایکن ها رو بچخونین  استفاده کنید مثلا ایکن ها چپ چین هستند با ۱۸۰ درجه چرخش راست چین و برای زبان فارسی استفاده کنید.

<i class="fa fa-shield"></i> معمولی <br>
<i class="fa fa-shield fa-rotate-90"></i> چرخش ۹۰ درجه <br>
<i class="fa fa-shield fa-rotate-180"></i> چرخش ۱۸۰ درجه <br>
<i class="fa fa-shield fa-rotate-270"></i> چرخش ۲۷۰ درجه <br>
<i class="fa fa-shield fa-flip-horizontal"></i> چرخش به طرفین<br>
چرخش به بالا <i class="fa fa-shield fa-flip-vertical"></i> 


معمولی

چرخش ۹۰ درجه

چرخش ۱۸۰ درجه

چرخش ۲۷۰ درجه

چرخش به طرفین

چرخش به بالا

امیدوارم آموزشم مفید بوده باشه ( منبع آموزش من وبسایت fortawesome هست )

شما همچنین میتونین فایل های قونت اوی سوم رو از سایت بالا دریافت کنید و فایل فونت رو در ویندوز خود نصب کنید و در طراحی قالبتون در فتو شاپ نیز از این ایکن ها استفاده کنید وطرح خود را از پایه در فتو شاپ عملی کنید .

با تشکر از صبر و حوصله شما – محمد – تم وردپرس

این مطلب را به اشتراک بگذارید:
balatarin cloob Donbaler viwio Donbaleh Twitter Facebook Google Buzz Google Bookmarks Digg yahoo Technorati delicious
  

برای دانلود قالب های رایگان حرفه ای به سون تم مراجعه کنید از این پس خدمات خود را در این وبسایت ارائه میدم

دانلود و دمو

Tags: , , , , , , , , , , ,

درباره محمد تم وردپرس

محمد حسین مومنی هستم 25سالمه تقریبا 10 سال از زندگیم رو تو نت گذروندم و از استاد خودم گوگل نکاتی یاد گرفتم که خوشحال میشم بقیه کاربران اینترنت هم استفاده کنند من در زمینه طراحی و ویرایش و شخصی سازی تم و قالب وردپرس تخصص دارم و در نکات امنیتی و سئو (بهینه سازی ) هم در حد کاربردی سر رشته دارم
هیچ دیدگاهی ارسال نشده.

پاسخ دهید

تم وردپرس در يک نگاه

themewordpress/قالب وردپرس

پذيرنده انواع سفارشات طراحي قالب ، راه اندازي وبسايت ، امنيت ، سئو و بهينه سازي سايت ، طراحي گرافيک، راه اندازي سايت هاي شرکتي و فروشگاهي ، فارسي سازي پوسته هاي وردپرس.