آموزش استفاده از فونت آیکون font awesome

استفاده از فونت آیکون یا font awesome خیلی ساده هست. برای این کار کافیه ابتدا به سایت fontawesome.com مراجعه کنید و از بخش Download فایلهایی که برای استفاده از font awesome ها لازم دارید رو دانلود کنید.

خب حالا فایلهای دانلود شده رو در root پروژه خودتون قرار بدید. بعد از اون کافیه در Layout پروژه خودتون یا هر جایی که میخواید از این فونت آیکون ها استفاده کنید فایل css مربوط رو به پروژه لینک کنید.

  <!-- Font Awesome -->
  <link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.min.css">

نحوه استفاده از font awesome

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

  <a href="#"><i class="fa fa-money"></i>لینک</a>

در مثال بالا یک لینک داریم که در کنار متنش یک آیکون پول هم هست. 

چندتا نکته رو باید هنگام استفاده از font awesome ها دقت کنید :

• فونت آیکون ها کلاس هستند. بنابراین باید برای استفاده از اونها در بخش کلاس ها ازشون استفاده بشه.
• بهتره که برای استفاده از font awesome ها از تگ i استفاده بشه. 
• برای استفاده از font awesome ها ابتدا کلاس fa و بعد از اون کلاس آیکون دلخواه رو بنویسید.

چند مثال از نحوه استفاده از font awesome 

<i style="margin-left:5px;" class="fa fa-gavel"></i>
<i style="font-size:16px; margin-right:5px; margin-left:5px;" class="icofont icofont-education"></i>

همانطور که می بینید میشه به راحتی style هم به فونت آیکون ها داد.

تغییر سایز font awesome ها با استفاده از class

خب در قسمت قبلی دیدید که میشه با استفاده از استایل دهی اندازه، رنگ و ... رو برای یک فونت آیکون تغییر داد. اما در font awesome ها اندازه های پیش فرض هم تعریف شده که میتونید از این کلاس ها هم استفاده کنید.

در ادامه به مثال زیر توجه کنید.

<i class="fa fa-gavel fa-xs"></i>
<i class="icofont icofont-education fa-lg"></i>
<i class="icofont icofont-education fa-5x"></i>

ایجاد آیکون های متحرک توسط font awesome

یکی از کاربردهای جالب فونت آیکون ها اینه که میتونید آیکون ها رو متحرک کنید و بسیار جذاب تر کنید پروژه خودتون رو. برای این کار کافیه از کلاس fa-spin استفاده کنید.

<i class="fa fa-gavel fa-spin"></i>

چرخش معکوس آیکون ها توسط font awesome ها

توی فونت آیکون ها میتونید آیکون های خودتون رو معکوس هم کنید. کافیه از کلاس های fa-rotate و fa-flip استفاده کنید.

<i class="fa fa-gavel fa-rotate-90"></i>
<i class="fa fa-gavel fa-rotate-180"></i>
<i class="fa fa-gavel fa-flip-vertical"></i>