آموزش جامع Font Awesome - آیکون‌های وب

📚معرفی و نصب

Font Awesome محبوب‌ترین کتابخانه آیکون وب است. آیکون‌ها به صورت SVG vector هستند و در هر اندازه‌ای بدون کاهش کیفیت نمایش می‌دهند.

روش CSS (توصیه‌شده برای آفلاین)

<!-- اتصال فایل CSS لوکال در <head> -->
<link rel="stylesheet" href="css/all.min.css">

<!-- استفاده از آیکون در HTML -->
<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-brands fa-github"></i>

ⓘ نکته مهم: مطمئن شوید پوشه webfonts/ در کنار css/ قرار دارد. Font Awesome برای رندر آیکون‌ها به فونت‌های آن پوشه نیاز دارد.

روش JS (برای SVG پویا)

<!-- روش JS — آیکون‌ها به SVG تبدیل می‌شوند -->
<script src="js/all.min.js"></script>

<!-- استفاده دقیقاً مثل روش CSS -->
<i class="fa-solid fa-star"></i>

💡 CSS در مقابل JS: روش CSS سریع‌تر لود می‌شود و برای اکثر پروژه‌ها بهتر است. روش JS قابلیت‌های اضافی مثل Masking و Symbol استفاده می‌دهد اما کمی کندتر است.

▶ دمو: آیکون‌های پایه

fa-house

fa-heart (regular)

fa-github

fa-star

fa-rocket

fa-instagram

🎨دسته‌بندی آیکون‌ها (Styles)

Font Awesome 6 آیکون‌ها را در چند سبک مختلف ارائه می‌دهد:

کلاس	سبک	توضیح
fa-solid	Solid	آیکون‌های پر — رایج‌ترین و کامل‌ترین مجموعه
fa-regular	Regular	آیکون‌های توخالی (outline)
fa-brands	Brands	لوگوهای برندها (GitHub, Twitter, ...)
fa-light	Light (Pro)	آیکون‌های نازک — نسخه Pro
fa-thin	Thin (Pro)	نازک‌ترین حالت — نسخه Pro

▶ دمو: مقایسه Solid و Regular

fa-solid fa-bell

fa-regular fa-bell

fa-solid fa-circle-user

fa-regular fa-circle-user

fa-solid fa-bookmark

fa-regular fa-bookmark

تفاوت Solid (پر) و Regular (توخالی) را مشاهده کنید

آیکون‌های برند (Brands)

▶ دمو: لوگوهای برند

github

twitter

instagram

youtube

react

vuejs

node-js

python

php

📏اندازه‌بندی آیکون‌ها

<!-- کلاس‌های اندازه نامی -->
<i class="fa-solid fa-star fa-xs"></i>   // 0.75em
<i class="fa-solid fa-star fa-sm"></i>   // 0.875em
<i class="fa-solid fa-star"></i>         // 1em (پیش‌فرض)
<i class="fa-solid fa-star fa-lg"></i>   // 1.25em
<i class="fa-solid fa-star fa-xl"></i>   // 1.5em
<i class="fa-solid fa-star fa-2xl"></i>  // 2em

<!-- اندازه با ضریب (1x تا 10x) -->
<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-5x"></i>

<!-- عرض ثابت — ایده‌آل برای منوها -->
<i class="fa-solid fa-house fa-fw"></i> خانه
<i class="fa-solid fa-envelope fa-fw"></i> ایمیل

▶ دمو: اندازه‌های مختلف

fa-xs

fa-sm

1x

fa-lg

fa-xl

fa-2xl

fa-3x

fa-5x

fa-fw — عرض ثابت برای ردیف‌بندی منو:

خانه

ایمیل

تلفن

آدرس

🎨رنگ و استایل‌دهی

آیکون‌های Font Awesome مثل متن HTML رنگ‌پذیرند — با CSS color رنگ و با font-size اندازه آن‌ها را تغییر دهید.

/* CSS */
.icon-red   { color: #e74c3c; }
.icon-green { color: #27ae60; }
.icon-grad  {
  background: linear-gradient(#f39c12, #e74c3c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<!-- HTML -->
<i class="fa-solid fa-fire icon-red"></i>
<i class="fa-solid fa-leaf icon-green"></i>
<i class="fa-solid fa-bolt icon-grad"></i>

▶ دمو: رنگ‌ها و گرادیان

قرمز

سبز

آبی

زرد

گرادیان

برند

بنفش

فیروزه‌ای

🌻انیمیشن آیکون‌ها

Font Awesome 6 کلاس‌های انیمیشن داخلی دارد که بدون نیاز به CSS اضافه کار می‌کنند:

کلاس	انیمیشن	کاربرد
fa-spin	چرخش مداوم	لودینگ، آپلود
fa-spin-reverse	چرخش معکوس	—
fa-pulse	چرخش با مکث (8 قدم)	لودینگ
fa-beat	ضربان قلب	لایک، علاقه‌مندی
fa-beat-fade	ضربان + محو	نوتیفیکیشن
fa-bounce	پرش	جلب توجه
fa-shake	لرزش	هشدار، خطا
fa-flip	وارونگی	—
fa-fade	محو و ظهور	نشانگر آنلاین

▶ دمو: انیمیشن‌های زنده

fa-spin

fa-beat

fa-beat-fade

fa-shake

fa-bounce

fa-fade

fa-spin-reverse

fa-pulse

سفارشی‌سازی با CSS Variables

<!-- کنترل سرعت و مقیاس انیمیشن -->
<i class="fa-solid fa-heart fa-beat"
   style="--fa-beat-scale: 1.3;
          --fa-animation-duration: 0.5s;"></i>

<i class="fa-solid fa-spinner fa-spin"
   style="--fa-animation-duration: 2s;"></i>

🆕Stack — لایه‌گذاری آیکون‌ها

با قابلیت Stack می‌توانید دو آیکون را روی هم قرار دهید و ترکیب‌های خلاقانه بسازید.

<!-- آیکون در دایره رنگی -->
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-circle fa-stack-2x" style="color:#3498db"></i>
  <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
</span>

<!-- آیکون با خط ممنوع (Banned) -->
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-camera fa-stack-1x"></i>
  <i class="fa-solid fa-ban fa-stack-2x" style="color:red;opacity:0.7"></i>
</span>

▶ دمو: Stack های متنوع

GitHub

تماس

ممنوع

تأیید

ستاره

تلگرام

🔍جستجوی آیکون — لیست کامل

لیست کامل ۲۰۴۵ آیکون رایگان Font Awesome 6. روی هر آیکون کلیک کنید تا کد HTML آن کپی شود.