امروزه « فونت‌آیکون »‌ ها یکی از بهترین ابزارهایی هستند که در ساختن وبسایت‌ها و اپلیکیشن‌ها استفاده می‌کنیم. فونت‌آیکون‌ها بی‌نهایت مقیاس‌پذیر هستند، با توجه به ساختار فونت مانند، شما می‌تونید بدون از دست دادن کیفیت در هر انداژه‌ای از آنها استفاده کنید.

از مزیت‌‌های دیگه فونت‌آیکون امکان استفاده از css برای تغییر رنگ، اندازه و موارد دیگری که در css وجود داره، که باعث می‌شه آزادی عمل و خلاقیت بیشتری به وجود بیاد، که امروزه در طراحی و پیادسازی وبسایت‌ها و اپلیکشن‌ها یک مورد ضروری هست.

به نظر من مهم‌ترین مزیت استفاده از فونت‌آیکون‌ها علاوه بر موارد بالا، قابلیت بارگزاری (Load) یکباره اونها هست. قبل از ظهور این ابزار ما برای کم کردن درخواست‌های HTTP مجبور بودیم که از تصاویر مجتمع استفاده کنیم و توسط css به اصطلاح اونها رو برش بزنیم، و در صورتی که این کار نمی‌کردیم بارگزاری هر آیکون یک درخواست HTTP محسوب می‌شد و همین موضوع باعث کاهش سرعت load سایت می‌شد. اما وقتی شما از فونت‌آیکون استفاده می‌کنید فقط یک بار فونت‌آیکون خودتون را بارگزاری می‌کنید و تمام. هر لحظه که نیاز داشتید اونها رو از طریق css فراخوانی و استفاده می‌کنید.

چگونه از فونت‌آیکون‌ها استفاده کنیم :

استفاده از فونت‌آیکون‌ها خیلی خیلی آسون هست. تنها کاری که نیاز هست انجام بدید load کردن اونها و استفاده از css هست. برای مثال از کد زیر برای load فونت‌آیکون معروف FontAwesome استفاده می‌کنیم

<!-- load the CSS file -->

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<!-- use the icon font -->

<!-- use i or span tag -->

<i class="ti-fire"></i>

<span class="ti-user"></span>



اگر تا حالا از فونت‌آیکون استفاده نمی‌کردید، پیشنهاد می‌کنم از امروز حتما این کار انجام بدید.

در ادامه تعدادی از فونت‌آیکون جهت استفاده معرفی شده است :

FontAwesome

fontawesoek-905x500

Themify Icons

themifyicons-905x500

Foundation Icons

foundation-iconfonts-905x500

Ionicons

Octicons

Linecons

Open Iconic

openiconic-905x500

Entypo

entypo

JustVector

justvectoricons-905x500

SVG Icons

svgfonts-905x500

Payment Icons