فصل هجدهم: استفاده از آیکون‌ها و فونت‌آیکون‌ها در CSS و HTML

اموزش رایگان CSS

مقدمه

آیکون‌ها نقش زیادی در قشنگ‌تر و کاربردی‌تر شدن رابط کاربری سایت دارند.
اضافه کردن آیکون به دو روش محبوب انجام میشه:

  1. فونت-آیکون‌ها (مثل Font Awesome, Material Icons)
  2. آیکون‌های SVG (تصاویر برداری کوچک)

۱. فونت-آیکون چیست؟

فونت-آیکون یک فونت مخصوصه که هر کاراکترش یک آیکون هست. مثل اینکه به جای “A” یک شکل نمایش داده میشه!

مثال با Font Awesome

قدم اول:

لینک CSS رو تو <head> بذار (برای نمونه):

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

قدم دوم:

از کلاس آیکون در HTML استفاده کن:

<i class="fa-solid fa-heart"></i>
<i class="fa-brands fa-github"></i>

نکته: فونت‌آیکون‌ها معمولا با تگ <i> یا <span> اضافه میشن، اما هر تگی میشه.

استایل دادن با CSS:

i {
  color: #e91e63;
  font-size: 2rem;
  margin-right: 10px;
}

۲. آیکون‌های SVG

SVG یک تصویر برداریه (برخلاف PNG/JPG)، همه جا واضح می‌مونه و قابل استایله.

مثال ساده:

<svg viewBox="0 0 16 16" width="24" height="24" fill="#1976d2">
  <path d="M8 0l8 14H0L8 0z"/>
</svg>

مزایای SVG:

  • کوچک و شفاف
  • می‌تونی با CSS رنگ یا سایز رو تغییر بدی
  • حتی می‌تونی انیمیشن بزنی!

۳. کِی فونت‌-آیکون بهتره و کی SVG؟

  • فونت‌آیکون:
    سریع و ساده، برای کارهایی مثل اضافه کردن یه آیکون به دکمه یا منو.
  • SVG:
    منعطف‌تر (حتی انیمیشن میشه)، تک‌رنگ یا چندرنگ، هر جا جزئیات بیشتر یا اندازه خیلی بزرگ لازمه.

۴. نکات سریع

  • برای دکمه یا لینک کنار متن، آیکون خیلی کاربردیه (مثلا: سبد خرید 🛒، جستجو 🔍).
  • آیکون‌ها دسترس‌پذیری رو فراموش نکن؛ اگه فقط با CSS درست کنی، برای صفحه‌خوان‌ها ممکنه نامفهوم باشه.
  • اغلب آیکون‌ها با کلاس icon یا اسم مشابه سفارشی میشن.

۵. تمرین

۱. یک دکمه با یک آیکون Font Awesome بساز و رنگ آیکون را با CSS تغییر بده.
۲. یک آیکون SVG ساده به صفحه اضافه کن و با :hover رنگش را عوض کن.
۳. تفاوت کیفیت SVG و PNG را در سایزهای مختلف امتحان کن.

منابع بیشتر

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *