آیکون‌ها مثل فونت یا تصویر عمل می‌کنن و برای زیباتر کردن طراحی و انتقال سریع مفهوم استفاده می‌شن.

📌 روش‌های استفاده از آیکون

1) استفاده از Font Awesome (رایج‌ترین روش)

ابتدا باید لینک کتابخونه رو اضافه کنی:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

حالا هرجا بخوای آیکون بذاری:

<i class="fa-solid fa-house"></i> خانه
<i class="fa-solid fa-phone"></i> تماس

🔹 با CSS هم می‌تونی رنگ و اندازه رو تغییر بدی:

i {
  color: coral;
  font-size: 24px;
}

2) استفاده از SVG (بهترین کیفیت و سبک مدرن)

🔹 SVG مستقیم در HTML میاد و با fill یا CSS رنگ عوض میشه.

3) استفاده از Icon Fonts فارسی (مثلاً Vazir Icon یا Material Icons)

مثال با Material Icons (گوگل):

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span class="material-icons">home</span>
<span class="material-icons">call</span>

4) استفاده به عنوان تصویر (PNG یا SVG فایل جدا)

<img src="icons/home.svg" alt="خانه" width="24">

🎨 استایل‌دهی با CSS

.icon {
  width: 40px;
  height: 40px;
  color: white;
  background: coral;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

✅ نکته: الان بیشتر سایت‌های حرفه‌ای از SVG + Tailwind یا Font Awesome استفاده می‌کنن چون هم سبک‌تره، هم واکنش‌گرا.