فونت آیکون چیست و چه کاربردی در طراحی وب دارد؟

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

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

فونت ها معمولا شامل چندین عدد و همینطور حروف هستند که به کاربر این امکان را می دهند تا مشخص کند که متون مورد نظر، با چه شکلی به کاربر نمایش داده شود. در کنار این نوع از فونت ها که به فونت های متنی نیز معروف هستند، فونت آیکون ها نیز وجود دارند. فونت ایکون، فونتی است که بجای اینکه شامل چندین حرف و متن باشد، شامل اشکال مختلفی است که می توان از آن ها استفاده کرد. شما می توانید با استفاده از فونت آیکون، در قسمت های مورد نظر از آیکون هایی که در داخل فونت تعبیه شده است استفاده کنید و اشکال مورد نظر را با ابعاد مورد نظر در سایت خود درج نمایید.

استفاده از فونت آیکون ها، مزایا و معایبی دارد که در ادامه به آن ها خواهیم پرداخت

مزایا:

    افزایش سرعت بارگذاری صفحات سایت در سایت های سنگین و بزرگ
    امکان تغییر اندازه
    مناسب برای استفاده در طراحی واکنش گرا
    قابلیت تغییر رنگ آیکون ها
    سرعت بالا نسبت به لود تصاویر
    تعریف چند اندازه پیش فرض برای آیکون ها

معایب:

    لو رفتن رابط کاربری سایت از طریق ایکون های موجود در فونت آیکون
    محدودیت در تعداد آیکون ها
    وجود نسخه های تجاری

  حال اگر بخواهیم یکی از فونت آیکون های رایگان و زیبا را معرفی کنیم، می توانیم به Font Awesome اشاره کنیم. این فونت آیکون که به صورت متن باز و رایگان در گیت هاب ارائه شده است به شما این امکان را می دهد تا بتوانید از آیکون های موجود در فونت، بجای تصاویر در سایت خود استفاده کنید.
Font Awesome، پرکاربردترین فونت آیکون ارائه شده

فونت آیکون Font Awesome را می توان پرکاربردترین فونت آیکون ارائه شده دانست که شامل ۵۸۵ آیکون می باشد و در دسته بندی هایی نظیر طراحی وب، شبکه های اجتماعی، نمودار و چارت آیکون های پرداخت و … دسته بندی شده اند.

Font Awesome به صورت متن باز، در گیت هاب در این لینک (+) در دسترس می باشد و شما می توانید این فونت آیکون را دانلود کرده و در پروژه های خود از آن استفاده کنید.

نحوه فراخوانی در وبسایت نیز بسیار ساده است. کافیست تا فونت آیکون را مانند سایر فونت ها، در فایل Style.css خود الحاق کنید. بعد از فراخوانی و الحاق فونت ها، کافیست تا آیکون مورد نظر خود را از این لینک (+) انتخاب کرده و بر روی آیکون مورد نظر کلیک کنید تا کد مربوط به فراخوانی آیکون مربوطه نمایش دهد. سپس کد را در هر قسمت که مدنظر دارید، کپی کرده و از آیکون مورد نظر استفاده کنید.

این فونت آیکون در بازه های زمانی مختلفی بروزرسانی شده و آیکون های جدیدی به آن اضافه می شود که همواره می توانید از این آیکون ها استفاده کنید.