آیکون‌ها (Icons)

استفاده از آیکون‌ها در CSS: Font Awesome، SVG، آیکون‌های ایموجی و روش‌های مختلف

آیکون در CSS

آیکون‌ها بخش مهمی از طراحی مدرن هستند — دکمه‌ها، منوها، نواحی اعلان و... همگی از آیکون استفاده می‌کنند.

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

روشتوضیحمزیت
Emojiکاراکترهای ایموجیساده‌ترین
Unicodeکاراکترهای یونیکدبدون وابستگی
Font Awesomeفونت آیکونهزاران آیکون
SVG inlineکد SVG داخل HTMLبهترین کنترل ⭐
Background Imageتصویر پس‌زمینهکنترل کامل

۱. آیکون‌های Emoji

ساده‌ترین روش — مستقیماً در HTML:

<button>🗑 حذف</button>
    <span>❤ پسندیدن</span>
    <a href="#">📧 ایمیل</a>

۲. آیکون‌های Font Awesome

/* در HTML */
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    /* استفاده */
    <i class="fas fa-home"></i> خانه
    <i class="fas fa-user"></i> پروفایل
    <i class="fab fa-github"></i> گیت‌هاب

سبک‌های Font Awesome

پیشوندسبکمثال
fasSolid (توپر)fas fa-home
farRegular (خطی)far fa-home
fabBrands (برندها)fab fa-twitter

استایل‌دهی به Font Awesome

.icon-large {
        font-size: 32px;
        color: #3498db;
    }
    
    .icon-spin {
        animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
        100% { transform: rotate(360deg); }
    }

۳. آیکون‌های SVG Inline ⭐

بهترین روش مدرن — مقیاس‌پذیر، سبک و قابل استایل:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M3 6h18M3 12h18M3 18h18"/>
    </svg>

مزایای SVG

استایل SVG با CSS

.icon {
        width: 24px;
        height: 24px;
        color: #3498db;
        transition: all 0.3s;
    }
    
    .icon:hover {
        color: #e74c3c;
        transform: scale(1.1);
    }

۴. آیکون به‌عنوان پس‌زمینه

.icon-home {
        width: 32px;
        height: 32px;
        background-image: url("home-icon.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

آیکون در شبه‌عناصر (::before / ::after)

.external-link::after {
        content: " ↗";
        color: #3498db;
    }
    
    .required::after {
        content: " *";
        color: red;
    }
    
    .checkmark li::before {
        content: "✓ ";
        color: #2ecc71;
        font-weight: bold;
    }

کتابخانه‌های آیکون محبوب

کتابخانهتعداد آیکونلینک
Font Awesome۷۰۰۰+fontawesome.com
Material Icons۲۰۰۰+fonts.google.com/icons
Bootstrap Icons۱۸۰۰+icons.getbootstrap.com
Heroicons۳۰۰+heroicons.com
Lucide۱۰۰۰+lucide.dev

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط