فصل ۱۵ | CSS Text & Fonts

آیکون‌ها در CSS

Icon (آیکون) نمادی گرافیکی و کوچک است که برای نمایش بصری یک مفهوم، مانند خانه، جستجو یا شبکه‌های اجتماعی، در صفحات وب استفاده می‌شود. رایج‌ترین روش برای افزودن آیکون به یک صفحه، استفاده از کتابخانه‌های آیکون (Icon Libraries) است که مجموعه‌ای آماده از آیکون‌ها را در اختیار قرار می‌دهند.

استفاده از کتابخانه‌ی آیکون

یکی از شناخته‌شده‌ترین کتابخانه‌های آیکون، Font Awesome است. برای استفاده از آن، ابتدا باید لینک این کتابخانه را در بخش <head> فایل HTML اضافه کرد.

index.html
<head>

    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <img src="logo.png" alt="لوگو"

</head>

با اضافه کردن این خط، تمام آیکون‌های کتابخانه‌ی Font Awesome در دسترس صفحه قرار می‌گیرند و می‌توان از آن‌ها در بدنه‌ی HTML استفاده کرد.

نمایش یک آیکون در صفحه

بعد از اتصال کتابخانه، هر آیکون با استفاده از یک تگ <i> یا <span> همراه با یک Class مخصوص همان آیکون نمایش داده می‌شود.

index.html
<i class="fa-solid fa-heart"> </i>

در این مثال، با استفاده از کلاس fa-solid fa-heart، آیکون یک قلب توپر در صفحه نمایش داده می‌شود.

نکته: نام دقیق کلاس هر آیکون را می‌توان از وب‌سایت رسمی کتابخانه‌ی موردنظر پیدا کرد، زیرا هر آیکون یک نام کلاس مخصوص به خودش دارد.

استایل‌دهی به آیکون‌ها با CSS

از آنجا که آیکون‌ها در واقع فونت هستند، می‌توان با همان ویژگی‌های CSS مخصوص متن، مانند رنگ و اندازه، ظاهر آن‌ها را تغییر داد.

style.css
.fa-heart {
    color: crimson;
    font-size: 32px;
}

در این مثال، رنگ آیکون قلب برابر crimson و اندازه‌ی آن برابر 32px تنظیم شده است. با این روش، بدون نیاز به تصویر جداگانه، می‌توان ظاهر آیکون‌ها را کاملاً با CSS کنترل کرد.