آشنایی با فونت آیکون و کاربرد آن در طراحی وب

0
font

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

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

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

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

مزایا:

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

معایب:

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

 

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

Font Awesome، پرکاربردترین فونت آیکون ارائه شده

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

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

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

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

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

شما می توانید جذاب ترین اخبار و مقالات دنیای تکنولوژی را در کانال تلگرام زوم تک دنبال کنید. برای عضویت در این کانال، اینجا کلیک کنید.

هیچ نظری یافت نشد

ارسال نظر

Time limit is exhausted. Please reload CAPTCHA.