مشاوره رایگان کسب و کار اینترنتی

فونت آیکون چیست؟ | آموزش استفاده از Font Awesome 5

فونت آیکون Awesome

چکیده‌ی مطلب

۱۴ تیر ۱۳۹۸ ۵۹۹ بازدید 1 دقیقه
استفاده از فونت آیکون در طراحی وبسایت باعث زیبایی بیشتر و افزایش سرعت وبسایت شما می‌شود. در این مقاله نحوه استفاده از فونت آیکون Awesome 5 را آموزش می‌دهیم.

فونت آیکون چیست؟
چرا باید از فونت آیکون استفاده کنیم؟
معرفی فونت آیکون محبوب Font Awesome 5
نحوه استفاده از Font Awesome 5


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

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

در گذشته نه چندان دور، آیکون‌ها را بصورت یک فایل تصویر در طراحی استفاده می‌کردند. اما اینکار چند اشکال اساسی داشت:
اول اینکه تصاویر حجم زیادی دارند و این امر می‌توانست سرعت وبسایت‌ را کم کرده و یا استفاده شما از آیکون را محدود کند.
دوم اینکه نمی‌توانستیم سایز آیکون‌ها را تغییر دهیم، چرا؟ چون تصویر بود! و تغییر سایز تصویر از کیفیت آن کم می‌کند. و مواردی دیگر که گفتن آن‌ها در این مقاله نمی‌گنجد.

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


چرا باید از فونت آیکون استفاده کنیم؟

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


۱- فراخوانی کل آیکون‌ها تنها با یک درخواست!

خب این یعنی چی؟ شما برای استفاده از فونت آیکون تنها یک CDN یا یک فایل در هاست خود را فرا می‌خوانید و در ادامه بدون نیاز به فراخوانی دوباره، به تمام آیکون‌های موجود در آن مجموعه دسترسی دارید و از آنها استفاده می‌کنید. این یعنی سرعت بیشتر.


۲- امکان فراخوانی به‌وسیله CDN

فراخوانی فونت آیکون به‌سیله CDN یکی از مهمترین مزایای استفاده از فونت آیکون است. CDN چیست؟ شرکت‌هایی مثل گوگل و مایکروسافت و… سرور‌هایی را در نقاط مختلف جهان در اختیار دارند. فرض کنید فونت آیکون ما در سرور گوگل قرار دارد و ما آنرا از طریق CDN گوگل فراخوانی می‌کنیم. نه‌تنها ما بلکه هزاران وبسایت دیگر هم این‌کار را انجام می‌دهند.

همانطور که می‌دانید وقتی یک صفحه وب را برای اولین بار مشاهده می‌کنید، برخی فایل‌های مربوط به آن صفحه مانند فایل CSS، JavaScript، فونت‌ها، عکس‌ها و… توسط مرورگر شما کَش (cache) می‌شود تا در آینده بتواند آن وبسایت را خیلی سریع تر بارگیری کند. (یعنی اطلاعات را از محل ذخیره‌سازی خود می‌خواند نه از سرور)

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


۳- سهولت در تغییر سایز و رنگ آیکون

همانطور که اشاره کردیم آیکون‌ها بصورت برداری طراحی شده‌اند، این مسئله گویای این است که تغییر سایز آیکون بدون کوچکترین اُفت کیفیت انجام می‌شود. می‌توانید برای تغییر سایز و رنگ آیکون، با آن مانند یک فونت رفتار کنید، یعنی از ویژگی font-size و color استفاده کنید. به همین راحتی

خب فکر می‌کنم که دیگر برای استفاده از فونت آیکون به اندازه کافی قانع شده باشید!


معرفی فونت آیکون محبوب Font Awesome 5

معرفی و آموزش font Awesome

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

  • Awesome 5
  • Awesome 4
  • Bootstrap 3
  • Google Icons


در این آموزش ما Font Awesome 5 را به شما معرفی می‌کنیم. اما اگر می‌خواهید از فونت آیکون‌های دیگر استفاده ‌کنید نگران نباشید. چون روال کار استفاده از همه آنها یکسان است.

Font Awesome 5 در نسخه PRO (غیر رایگان) ۴۸۴۵ آیکون و در نسخه رایگان ۱۴۸۰ آیکون دارد، که در این آموزش ما با نسخه رایگان کار می‌کنیم.


نحوه استفاده از Font Awesome 5

برای استفاده از نسخه رایگان Font Awesome 5، ابتدا تگ زیر را در بخش <head> صفحه وب خود اضافه کنید.

توجه: هیچ دانلود و نصبی لازم نیست!

برای نمایش آیکون‌های Font Awesome 5 در هرجایی از صفحه وب خود، می‌توانید از تگ i یا span کمک بگیرید و از خصیصه class آنها برای انتخاب نوع آیکون استفاده کنید. به مثال زیر توجه کنید:

خروجی: آیکون ساعت

برای انتخاب آیکون در خصیصه class می‌توان دو پیشوند به کار برد، fas و far، که پیشوند fas مخفف عبارت Font Awesome Solid و پیشوند far مخفف عبارت Font Awesome Regular است. این نشان دهنده این است که Font Awesome 5 دارای انواع آیکون‌های Solid و Regular است که تفاوت آنها را با کمی دقت در آیکون‌های مختلف این مجموعه، متوجه خواهید شد.

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


برای تغییر رنگ و سایز آیکون، همانطور که گفتیم می‌توانید از خصیصه font-size و color در CSS استفاده کنید.


برای ایجاد حالت چرخش در آیکون‌ها می‌توانید کلاس fa-spin (چرخش معمولی) و fa-pulse (چرخش در ۸ فریم) را اضافه کنید.


برای اطلاعات بیشتر درباره Font Awesome 5 می‌توانید به صفحه زیر مراجعه کنید:

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

۵٫۰
۰۲

نظرات کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.