فونت آیکون چیست؟ معرفی انواع Icon Font های محبوب

فونت آیکون یا Icon fonts به زبان ساده به فونت هایی گفته می شود که شامل سمبل ها (Symbols) و Glyphs به جای اعداد و حروف هستند. این فونت آیکون ها نزد طراحان وب از محبوبیت خاصی برخوردار هستند زیرا شما می توانید همانند متن معمولی آن ها را با CSS استایل دهی کنید

فونت آیکون چیست؟

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

در گذشته نه چندان دور، آیکون‌ها را بصورت یک فایل تصویر در طراحی استفاده می‌کردند. اما اینکار چند اشکال اساسی داشت:

• تصاویر حجم زیادی دارند و این امر می‌توانست سرعت وبسایت‌ را کم کرده و یا استفاده شما از آیکون را محدود کند.
• نمی‌توانستیم سایز آیکون‌ها را تغییر دهیم، چرا؟ چون تصویر بود و تغییر سایز تصویر از کیفیت آن کم می‌کند.
• نمی‌توانستیم رنگ آیکون‌ها را تغییر دهیم و…
• سرعت برنامه نویسان و طراحان سایت کاهش پیدا می کرد.

نحوه استفاده از Icon Font

بطور کلی برای استفاده از یک Icon Font دو راه پیش روی شماست.

راه اول دانلود فایل‌های فونت است. معمولا وقتی یک فونت آیکون را دانلود می‌کنید در آن فایل‌های مربوط به فونت و یک فایل CSS وجود دارد.

شما کافیست فایل‌ CSS آن را به پروژه خود اضافه کنید و فایل ‌های فونت را در مکان مناسبی قرار دهید.

راه دوم استفاده از CDN است، در این روش تنها کافیست تا یک تگ Link را در عنصر Head کدهای قالب خود اضافه کنید. این تگ را معمولا در یک فایل راهنما یا در وبسایت آن فونت آیکون می‌توان پیدا کرد

معرفی Icon Font های محبوب

-Font Awesome Icons

-Bootstrap Icons

-Google Icons