CSS Icons

1. آیکون‌ها در CSS چطور استفاده میشن؟

آیکون‌ها معمولا تصاویر کوچیک یا نمادهای گرافیکی هستند که برای زیبایی یا نمایش عملکردهای خاص استفاده میشن. چند روش معمول برای استفاده از آیکون‌ها در CSS:

—

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

a) استفاده از تصاویر آیکون (مثل PNG, SVG)

css
.icon {
width: 32px;
height: 32px;
background-image: url(‘icon.png’);
background-size: contain; /* اندازه مناسب داخل بلوک */
background-repeat: no-repeat;
}

—

b) استفاده از تصاویر آیکون(Icon fonts)

مثل فونت‌های محبوب: FontAwesome، Ionicons، Material Icons و…

در HTML:

html
<i class=“fa fa-home”></i>

در CSS (بعد از اضافه کردن فونت آیکون):

css
.fa {
font-size: 24px;
color: #333;
}

—

c) استفاده از SVG مستقیم داخل HTML یا CSS

در HTML:

html
<svg width=“24” height=“24” viewBox=“0 0 24 24”>
<path d=“M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z”/>
</svg>

یا به عنوان پس‌زمینه در CSS:

css
.icon {
background-image: url(‘icon.svg’);
width: 24px;
height: 24px;
}

—

 3. ویژگی‌های مهم CSS برای آیکون‌ها

| خاصیت                        | کاربرد |
| ——————             | ————————– |
| `background-image`    | قرار دادن تصویر آیکون |
| `background-size`       | تنظیم اندازه آیکون |
| `color`                       | تغییر رنگ فونت آیکون‌ها |
| `font-size`                  | تنظیم اندازه فونت آیکون‌ها |
| `width` و `height`      | تعیین اندازه آیکون |
| `fill` (برای SVG)          | رنگ داخل آیکون‌های SVG |

—

4. مثال ترکیبی

html
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css”>

<i class=“fas fa-star” style=“color: gold; font-size: 30px;”></i>

—

خلاصه

* می‌تونید آیکون‌ها رو با تصویر، فونت آیکون یا SVG استفاده کنید.
* فونت آیکون‌ها ساده و قابل تنظیم هستند.
* SVG بهترین کیفیت و انعطاف رو می‌ده.