سلام،

اگر تبدیل به فونت آیکون کنی نیازی نیست از تگ img استفاده کنی. مثل فونت آیکون‌های دیگه از طریق css استفاده میکنی.

چجوری باید تبدیل به فونت آیکون کنم؟؟

پاسخی داده نشده.

سلام. وقتتون بخیر
عذرخواهی می‌کنم بابت تاخیر در پاسخگویی.
ببینید 2 راه هست:
1. اگه به‌صورت فایل تصویری (PNG, SVG جداگانه) خروجی گرفتید، باید برای هر آیکون از <img> یا background-image در CSS استفاده کنید.
2. اگه می‌خواید مثل فونت‌ها استفاده کنید، باید آیکون‌ها رو به یک فونت آیکون (Icon Font) یا SVG Sprite تبدیل کنید. اون وقت می‌تونید با یک کلاس CSS مثل <i class="icon-home"></i> یا با <svg><use xlink:href="#icon-home"></use></svg> هرجا خواستید آیکون رو نمایش بدید، بدون اینکه برای هرکدوم <img> جدا بسازید.

روش SVG Sprite

1. آیکون‌ها رو به SVG تبدیل کنید

اگر PNG دارید، به SVG تبدیل‌شون کنید (Illustrator/Figma → Export as SVG). اسم فایل‌ها رو معنی‌دار بذارید: home.svg, user.svg, …

2. اسپرایت بسازید

همهٔ SVGها رو در IcoMoon (یا هر ابزار مشابه) Import کنید --> همه رو Select کنید --> Generate SVG & More --> فایل sprite.svg رو دانلود کنید.

3. فایل رو تو پروژه بذارید: مثلاً تو: /assets/icons/sprite.svg

4. حالا تو HTML استفاده کنید

<!-- جایی که آیکون می‌خوای: -->
<svg class="icon"><use href="/assets/icons/sprite.svg#home"></use></svg>
<svg class="icon"><use href="/assets/icons/sprite.svg#user"></use></svg>

نکته: بعد از ساخت اسپرایت، هر آیکون یک ID داره (معمولاً اسم فایل). همون رو بعد از # بنویسید.

5. استایل و کنترل رنگ/اندازه

.icon{
  width: 1em; height: 1em; 
  fill: currentColor; /* رنگ از color والد می‌گیره */
  vertical-align: -0.125em;
}
.button{ color:#3b82f6; font-size:20px; } /* با color و font-size کنترل کن */

با تغییر color عنصر والد، رنگ آیکون عوض می‌شه؛ با تغییر font-size یا width/height، اندازه تغییر می‌کنه.

----------------------------------------------------------------------------------------------------------

اگر «مثل فونت» می‌خواید:

در IcoMoon همون آیکون‌ها رو Import و Select کنید → Generate Font.

پوشهٔ فونت و style.css رو در پروژه کپی کنید و CSS رو لینک کنید.

طبق کلاس‌های تولیدشده استفاده کنید:

<i class="icon-home"></i>

رنگ با color عوض می‌شه، اما آیکون‌های چندرنگ پشتیبانی نمی‌شن و کنترل جزئیات کمتره.