غیر ممکن است که یک برنامه نویس یا طراح فرانت اند باشید ولی نیاز به استفاده از آیکن نداشته باشید. تا قبل از پیدایش CSS استفاده از تصاویر jpeg و PNG برای کلیدها و المان های صفحه معمول بود. شکلک ها گاها به صورت یک فایل یکپارچه و مملو از تمامی شکلک ها ایجاد می شد تا بوسیله دستوران html استخراج بشه.
با توجه به اینکه شکلک های گرافیکی همیشه در دسترس نبود و اینکه زمان بارگذاری صفحه را افزایش می داد، موضوع جدیدی به نام فونت آیکن (Font Icon) مطرح شد.
هر کلاس فونتی که به جای کاراکترهای معمولی حروف آلفابت، شکلک ها و تصاویر گرافیکی را نمایش دهند به عنوان فونت آیکن شناخته می شوند. فونت آیکن ها برخلاف تصاویر PNG و jpeg به راحتی و بدون افت کیفیت می توانند بزرگنمایی شوند چرا که اساسا از نظر CSS به عنوان فونت شناخته می شوند.
به کاربردن فونت آیکن ها، بسته به پلتفورم مورد استفاده، به روش مختص خودش در همان پلتفورم استفاده می شود. هرچند در نهایت تمامی پلتفورم ها (React، Angular، Vue و HTML) در نهایت به شکل یک کلاس CSS استفاده خواهد شد. برای نمونه، کد زیر پس از انجام تنظیمات مورد نظر در پروژه، آیکن گیت هاب را به نمایش می گذارد:
<i class="fa-brands fa-github-square"></i>
همانطور که فونت های مختلف با ظاهر، لایسنس و تولید کننده متفاوت وجود دارد، برای فونت آیکن ها هم داستان به همین شکل است. بنابراین، استفاده از آنها بر بعضی مواقه نیاز به پرداخت هزینه است. البته بسیاری از فونت آیکن های شناخته شده نسخه های رایگان نیز ارائه می دهند که برای فضای وب بسیار مناسب است. استفاده رایگان به شرطی است که قوانین و شرایط لایسنس آنها را رعایت کنید.
به جرات می توان گفت که انتخاب اول طراحان وب، فونت Awesome است. فونتی که در Bootstrap نیز استفاده شده. این فونت بواسطه متن باز بودن، سالیان سال است که در بسیاری از پروژه ها استفاده می شود و هر ساله بروزرسانی نیز می شود. کاربر می تواند آیکن ها را بوسیله CSS بزرگنمایی کند.
گوگل با ایجاد مقوله متریال دیزاین، رویکرد جدیدی را به فضای UI/UX در وب به همراه آورد که خودش منجر به ایجاد فریم ورک ها و لابرری های جدیدی شد که این فونت را در خود به همرا داشتند. فونت متریال دیزاین با بیش از یک هزار آیکن کاملا رایگان در گیت هاب در دسترس است.نکنه حائز اهمیت در مورد فونت متریال دیزاین، لایسنس متن باز آن است که به شما اجازه ایجاد تغییر در فونت ها رو هم فراهم میکند.
از زمان تولید این فونت زمان چندانی نمی گذرد ولی به صورت شگرفی استفاده از آن در پروژه ها افزایش یافته است. فونت های انتایپو در دو دسته Main و Social قرار دارند. بنابراین اگر به فونت های از نوع شبکه های اجتماعی نیاز ندارید، نیاز به دانلود و به کارگیری تمامی فونت ها نیست. انتایپو بیش از چهارصد فومت را شامل می شود.
این فونت متعلق به گیت هاب است که اخیرا لایسنس آن به متن باز تغییر کرده است. نسخه 5.0 این فونت شامل تعداد زیادی آیکن های مختلف است که در عین سادگی، زیبایی خود را دارند. بنابراین اگر به دنبال یک فونت ساده هستنید، این فونت گزینه مناسبی است.
این فونت یکی از تازه واردها به فضای وب است که بیشتر برروی فناوری و برندیک تمرکز دارد. تقریبا آیکن مربوط به لوگوی هر برندی که فکرش را بکنید؛ از شرکت های فناوری بزرگ مثل گوگل گرفته تا جدیدترین CMS ها مثل Ghost، در آن پیدا می شود. کاربرد این فونت برای وب سایت هایی است که به دنبال تصویر وکتور لوگوی یک برند هستند.
