فرادرسکاربرد فونت آیکون در طراحی وب
اگر شما طراح وب هستید و یا زیاد وبگردی می‌کنید، حتماً در بسیاری از سایت‌ها مشاهده کرده‌اید که در برخی قسمت‌ها، از آیکون‌های خاصی استفاده می‌شود. جالب اینجاست که این سایت‌ها برای نمایش این اشکال، از تصاویر ویژه استفاده نمی‌کنند، بلکه فونت‌های مخصوصی را به کار می‌برند که اصطلاحاً به آن فونت آیکون گفته می‌شود.
فونت آیکون چیست؟
فونت‌ها معمولاً شامل چندین عدد و همین‌طور حروف هستند که به کاربر این امکان را می‌دهند تا مشخص کند که متون موردنظر، با چه شکلی به کاربر نمایش داده شود. در کنار این نوع از فونت‌ها که به فونت‌های متنی نیز معروف هستند، فونت آیکون‌ها نیز وجود دارند. فونت آیکون، فونتی است که بجای اینکه شامل چندین حرف و متن باشد، شامل اشکال مختلفی است که می‌توان از آن‌ها استفاده کرد. شما می‌توانید به استفاده از فونت آیکون، در قسمت‌های موردنظر از آیکون‌هایی که در داخل فونت تعبیه‌شده است استفاده کنید و اشکال موردنظر را با ابعاد موردنظر در سایت خود درج نمایید.
استفاده از فونت آیکون‌ها، مزایا و معایبی دارد که در ادامه به آن‌ها خواهیم پرداخت:
مزایا:
- افزایش سرعت بارگذاری صفحات سایت در سایت‌های سنگین و بزرگ
- امکان تغییر اندازه
- مناسب برای استفاده در طراحی واکنش‌گرا
- قابلیت تغییر رنگ آیکون‌ها
- سرعت بالا نسبت به لود تصاویر
- تعریف چند اندازه پیش فرض برای آیکون‌ها
معایب:
- محدودیت در تعداد آیکون‌ها
- وجود نسخه‌های تجاری
حال اگر بخواهیم یکی از فونت آیکون‌های رایگان و زیبا را معرفی کنیم، می‌توانیم به Font Awesome اشاره‌کنیم. این فونت آیکون که به‌صورت متن‌باز و رایگان در گیت‌هاب ارائه‌شده است به شما این امکان را می‌دهد تا بتوانید از آیکون‌های موجود در فونت، بجای تصاویر در سایت خود استفاده کنید.
Font Awesome، پرکاربردترین فونت آیکون ارائه شده
فونت آیکون Font Awesome را می‌توان پرکاربردترین فونت آیکون ارائه‌شده دانست که شامل 585 آیکون می‌باشد و در دسته‌بندی‌هایی نظیر طراحی وب، شبکه‌های اجتماعی، نمودار و چارت آیکون‌های پرداخت و ... دسته‌بندی شده‌اند. Font Awesome به‌صورت متن‌باز، در گیت هاب در این لینک (+) در دسترس می‌باشد و شما می‌توانید این فونت آیکون را دانلود کرده و در پروژه‌های خود از آن استفاده کنید.
نحوه فراخوانی در وب‌سایت نیز بسیار ساده است. کافی است تا فونت آیکون را مانند سایر فونت‌ها، در فایل Style.css خود الحاق کنید. بعد از فراخوانی و الحاق فونت‌ها، کافی است تا آیکون موردنظر خود را از این لینک (+) انتخاب کرده و بر روی آیکون موردنظر کلیک کنید تا کد مربوط به فراخوانی آیکون مربوطه نمایش دهد. سپس کد را در هر قسمت که مدنظر دارید، کپی کرده و از آیکون موردنظر استفاده کنید.
این فونت آیکون در بازه‌های زمانی مختلفی به‌روزرسانی شده و آیکون‌های جدیدی به آن اضافه می‌شود که همواره می‌توانید از این آیکون‌ها استفاده کنید. درصورتی‌که می‌خواهید طراحی وب را شروع کنید و یا مایل به یادگیری مباحث بیشتری دارید، آموزش‌های زیر را پیشنهاد می‌کنیم:
- مجموعه آموزش‌های طراحی و برنامه نویسی وب
- گنجینه آموزش های طراحی وب
- چگونه برنامه نویسی وب را شروع کنم؟
- آموزش طراحی قالب استاتیک برای سایت
- آموزش طراحی سایت وردپرسی بدون کدنویسی
#
