امروز در قالب گراف با آموزش استفاده از فونت آیکون Font Awesome به زبانی کاملا ساده و روان و شیوا در خدمت شما عزیزان هستیم.
سرفصل های مندرج در این آموزش عبارت اند از :
1- فونت آیکون چیست ؟
2- چرا بهتر است به جای عکس از فونت آیکون استفاده کنیم ؟
3- نحوه استفاده از فونت آیکون در سایت یا وبلاگ
4- سایر آموزش های حرفه ای مربوط به Font Awesome
- نحوه تغییر سایز فونت آیکون
- نحوه دادن استایل css به فونت آیکون
- گردش (حالت زنده بخشیدن به فونت ها)
- آموزش چرخش فونت ها
- آموزش ثابت کردن طول فونت ها
- دادن حاشیه به فونت آیکون
- نحوه شناور سازی فونت های آیکون
- ادغام و ترکیب فونت ها با یکدیگر
- ایجاد لیست با فونت آیکون
- امتیازدهی ستاره ای با فونت آیکون


فونت آیکون چیست ؟
فونت های آیکون ؛ آیکون های آماده با ظاهر گرافیکی زیبا هستند که شما میتوانید از آنها به راحتی بدون نیاز به طراحی عکس استفاده کنید.
فونت های آیکون بسیاری در سطح اینترنت موجود می باشد که از میان آنها Font Awesome بهترین و کاملترین می باشد.

چرا بهتر است به جای عکس از فونت آیکون استفاده کنیم ؟
1- دارای حدودا 632 آیکون وکتور آماده
2- امکان تغییر سایز فونت ها بدون افت کیفیت
3- کنترل کامل از طریق Css
4- قابلیت استفاده از هاور بدون نیاز به استفاده از چند تصویر
5- حجم بسیار کم نسبت به استفاده از عکس
6- پشتیبانی از مرورگرهای قدیمی ( حتی IE7 )
7- بی نیاز به کدهای جاوااسکریپت JavaScript برای استفاده
8- پشتیبانی در همه نمایشگر ها از جمله کامپیوتر ، تبلت ، موبایل
9- کدهای html ساده برای استفاده


نحوه استفاده از فونت آیکون در سایت یا وبلاگ
مرحله 1 ) جهت افزودن این فونت به وبلاگ خود کد زیر را قبل از تگ به قالب خود اضافه کنید :

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

مرحله 2) آخرین کاری که باید بکنید وارد کردن کد آیکون در بخش مورد نظر در قالب با استفاده از کد زیر می باشد :

معمولا از i یا span برای فراخوانی فونت آیکون استفاده میشود که در کد بالا ما از تگ i به عنوان مثال استفاده کردیم.
در کد بالا gg نام آیکون شما می باشد که با تغییر اون به کلمات دیگر میتوانید آیکون مد نظر خود را تغییر دهید.
جهت آشنایی با نام آیکون ها و دیدن نمونه تمام آیکون ها به لینک زیر مراجعه نمایید :
http://fontawesome.io/icons
مثال :
fa-home
fa-image
fa-spinner

سایر آموزش های حرفه ای مربوط به Font Awesome
1- تغییر سایز
شما به دو روش میتوانید سایز فونت های آیکون را تغییر دهید.
اولین و ساده ترین راه استفاده از کد زیر است که در کد زیر به جای مقدار 2 هر عددی قرار دهید ، آیکون مورد نظر شما به اندازه آن ، چند برابر اندازه اولیه می شود(نکته: اعداد میتوانند 2 و 3 و 4 و 5 فقط باشند) .

مثال :
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
دومین روش استفاده از Id یا Class برای فونت می باشد که میتوانید در Css به فونت آیکون اندازه دهید.
به عنوان مثال ما به فون آیکون اولیه خود کلاس GhalebGraphIr می دهیم به شکل زیر :

سپس در فایل Css خود یا مابین تگ Style برای کلاس تعیین شده استایل زیر را دهید :

.GhalebGraphIr{font-size:100px;}

همونطوری که دیدید ما از height و width برای بزرگ کردن فونت آیکون استفاده نکردیم که شاید سوالی تو ذهن شما قالب گرافی ها ایجاد کنه که چرا ؟ خب فونت آیکون همونطوری که گفتیم فونت هست ! پس عملا این تگ ها رو هم استفاده کنیم کارایی نخواهد داشت پس برای تغییر سایز اون باید از کدهای مخصوص فونت استفاده کنیم

2- دادن استایل های css :
توی مورد اول این مسئله رو توضیح دادیم ولی بازم جهت یادآوری این مورد رو از نو توضیح میدم.
ما میتونیم روی فونت های خود توی فونت آیکون استایل تعریف کنیم .
برای این کار یک کلاس با یک اسم دلخواه به کد فونت آیکون خودمون میدیم. مثلا تو کد زیر من کلاس GhalebGraphIr رو تعیین کردم

بعدش میاییم داخل کد های Css یا داخل تگ style توی صفحمون به شکل زیر به این کلاس استایل میدیم :

.GhalebGraphIr{font-size:100px;}

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

.GhalebGraphIr{
color:#DA0C0C; /* تغییر رنگ آیکون */
font-size:100px; /* تغییر اندازه آیکون */
text-shadow:0px 0px 2px #111; /* دادن سایه به آیکون */
background: #ff0ff0; /* تغییر رنگ پست زمینه آیکون */
و سایر تگ های سی اس اس
}

3- گردش (حالت زنده بخشیدن به فونت ها)
فرض کنید شما یک کد لودینگ با استفاده از فونت آیکون در صفحه سایت خود ایجاد کرده اید

که پیش نمایش این کد به شکل مقابل و عملا به صورت ثابت خواهد بود :
حال اگر بخواهید این آیکون را به چرخش در آورید باید خاصیت fa-spin را به آن اضافه کنید

که پیش نمایش کد بالا نیز به این شکل خواهد بود :
شما میتوانید برای تمام آیکون های دایره ای که در فونت آیکون وجود دارد این قابلیت را اضافه نمایید !
تا این جای کار خسته نباشید قالب گرافی ها که واقعا خستگی داره البته تایپش نه خوندنش خخخ

4- چرخش
شما میتوانید با استفاده از css یا کدهای html مختص فونت آیکون این آیکون ها را به راحتی چرخش دهید.
در این قسمت از آموزش فونت آیکون از سایت قالب گراف آموزش چرخش با استفاده از کدهای مختص فونت آیکون را به شما یاد خواهیم داد.
برای چرخش شما باید خاصیت fa-rotate-number یا fa-flip-classes را به کد فونت خود بیافزاید.
برای مثال شما در حالت عادی یک کد فونت به شکل زیر دارید.

اگر بخواهید این فونت را در زاویه دلخواه چرخش دهید بایستی از کد زیر استفاده کنید(90 اندازه درجه است که میتوانید تغییر دهید ) :

همچنین از کدهای زیر نیز جهت چرخش در تراز افقی و عمودی نیز میتوانید استفاده کنید :

مثال :
حالت عادی
fa-rotate-90 چرخش 90 درجه
fa-rotate-180 چرخش 180 درجه
fa-rotate-270 چرخش 270 درجه
fa-flip-horizontal چرخش در تراز افتی
fa-flip-vertical چرخش در تراز عمودی

5- متغیر کم کاربرد ثابت کننده طول
از متغیر fa-fw در فونت آیکون برای ثابت کردن طول استفاده میکنند.
این کد بیشتر در ایجاد فهرست منوها و گروه ها کاربرد دارد.
به عنوان مثال در حالت عادی داریم :

که اگر بخواهیم این آیکون را ثابت کنیم(اندازه ای پیش فرض از متون کناری دهیم) از کد زیر استفاده میکنیم :

مثال :
حالت عادی
حالت ثابت

6- دادن حاشیه به فونت آیکون
برای دادن حاشیه ، شما علاوه بر استفاده از border-radius در css جهت ایجاد حاشیه به وسیله روش شماره 2 میتوانید از متغیر مخصوص فونت آیکون که برای این کار آماده شده است استفاده کنید.
برای دادن حاشیه به فونت آیکون خود میتوانید متغیر fa-border را اضافه کنید

پیش نمایش :

7- ایجاد خاصیت شناور سازی float برای فونت های آیکون
برای دادن حاشیه ، شما علاوه بر استفاده از float در css جهت ایجاد حاشیه به وسیله روش شماره 2 میتوانید از متغیر مخصوص فونت آیکون که برای این کار آماده شده است استفاده کنید.
برای دادن خاصیت شناورسازی میتوانید از متغییر های fa-pull-right و fa-pull-left استفاده کنید.
به عنوان مثال اگر در حالت عادی شما آیکونی با کد زیر داشته باشید.

پس از اضافه کردن کدشناورسازی به شکل زیر خواهد بود :

مثال :
حالت عادی

حالت شناور راست right!
من مهرداد رستمی هستم
مدیر سایت قالب گراف و تهیه کننده این آموزش
از دیرباز تا کنون علاقه شدیدی به آموزش دیگران و انتقال دانشم به دیگران داشتم !

حالت شناور چپ left!
من مهرداد رستمی هستم
مدیر سایت قالب گراف و تهیه کننده این آموزش
از دیرباز تا کنون علاقه شدیدی به آموزش دیگران و انتقال دانشم به دیگران داشتم !

از اونجایی که قالب گراف تصمیم داره یه آموزش کامل در مورد فونت آیکون ارائه بده تصمیم داریم هر موردی در خصوص فونت آیکون وجود دارد را در این پست آموزش دهیم تا کاربران ایرانی در استفاده از این فونت خبره شوند.
به امید این که این پست دور از دزدی فرهنگی قرار گیرد!
خب آموزش را ادامه دهیم

8- ادغام و ترکیب آیکون ها !
این مسئله را با یک مثال برای شما توضیح می دهیم.
فرض کنید شما دو ایکون با کدهای زیر ایجاد کرده اید

که پیشنمایش این آیکون ها به این شکل اند : آیکون مربع و آیکون تویتر
شما با استفاده از متغیر های fa-lg و fa-stack و fa-stack-2x و fa-stack-2x و fa-inverse و text-danger میتوانید این کار را انجام دهید .
به عنوان مثال ما از متغیر fa-stack در کد زیر استفاده میکنیم :

در مثال بالا اندازه های 1 و 2 تعیین میکند که اندازه کدام آیکون 2 برابر دیگری باشد
دمو مثال بالا :
برای این که چیزی از این مبحث جا نماند به مثال های زیر سایت قالب گراف و دمو آن ها جهت آشنایی با کاربرد سایر متغیر ها توجه کنید :

  
  

fa-twitter on fa-square-o


  
  

fa-flag on fa-circle


  
  

fa-terminal on fa-square


  
  

fa-ban on fa-camera

پیش نمایش کد بالا :
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

9- ایجاد لیست
از کلاس های fa-ul و fa-li برای ایجاد لیست ها از طریق فونت آیکون استفاده کنید که این روش به دلیل وقت گیر بودن توصیه و آموزش داده نمیشود و شما میتوانید به حالت عادی نیز از این روش در ایجاد لیست استفاده کنید.
البته یک نمونه کد برای فهم این ماجرا برای شما در زیر قرار میدهیم تا اگر علاقه مند بودید خودتان استفاده نمایید !

  
List icons
  
can be used
  
as bullets
  
in lists

10- امتیاز دهی ستاره ای با فونت آیکون
برای ایجاد امتیاز ستاره دهی با کد فونت آیکون میتوانید از کد زیر استفاده نمایید :

☆☆☆☆☆

پیش نمایش کد بالا (لطفا موس را روی ستاره ها بگیرید) :

امیدواریم از این آموزش سایت قالب گراف لذت برده باشید.