فونت آیکون چیست؟ معرفی فونت آیکون‌های محبوب


نویسنده:
جمعه ۱۴ تیر ۱۳۹۸
۶۵۹ بازدید

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

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

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

در گذشته نه چندان دور، آیکون‌ها را بصورت یک فایل تصویر در طراحی استفاده می‌کردند. اما اینکار چند اشکال اساسی داشت:

  • تصاویر حجم زیادی دارند و این امر می‌توانست سرعت وبسایت‌ را کم کرده و یا استفاده شما از آیکون را محدود کند.
  • نمی‌توانستیم سایز آیکون‌ها را تغییر دهیم، چرا؟ چون تصویر بود و تغییر سایز تصویر از کیفیت آن کم می‌کند.
  • نمی‌توانستیم رنگ آیکون‌ها را تغییر دهیم و…

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

نکته: تصاویری که بصورت بُرداری طراحی می‌شوند با تغییر سایز از کیفیت آنها کاسته نمی‌شوند!


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

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

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

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

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

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

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

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

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

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

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

نحوه استفاده از Font Icon در صفحات وب

بطور کلی برای استفاده از یک font icon دو راه پیش روی شماست.

راه اول دانلود فایل‌های فونت است. معمولا وقتی یک فونت آیکون را دانلود می‌کنید در آن فایل‌های مربوط به فونت و یک فایل css وجود دارد.

شما کافیست فایل‌ css آن را به پروژه خود اضافه کنید و فایل‌های فونت را در مکان مناسبی قرار دهید (این مکان مناسب را می‌توانید از راهنمای نصب فونت آیکون در وبسایت رسمی‌شان متوجه شوید).

راه دوم استفاده از CDN است (البته اگر فونت آیکون موردنظر از سریق CDN هم ارائه شود). در این روش تنها کافیست تا یک تگ link را در عنصر head کدهای قالب خود اضافه کنید. این تگ را معمولا در یک فایل راهنما یا در وبسایت آن فونت آیکون می‌توان پیدا کرد.

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

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

Font Awesome 5

به جرات می‌توان گفت که Font Awesome 5 محبوب‌ترین فونت آیکون در وب فارسی است. این فونت آیکون در دو نسخه Free و Pro ارائه می‌شوند.

در نسخه Pro مجموعاً 7020 آیکون در ضخامت‌های مختلف وجود دارد که البته رایگان نیست و باید آن را از وبسایت رسمی Font Awesome خریداری کنید.

در نسخه Free مجموعاً 1535 آیکون در دو ضخامت مختلف وجود دارد که همانطور که از نامش پیداست بصورت رایگان ارائه می‌شود.

Font Awesome 4

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

می‌توانید مستندات مربوط به نحوه استفاده از آن را از وبسایت رسمی Font Awesome 4 مشاهده کنید.

Google Icons

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

می‌توانید راهنمای استفاده از این فونت و لیست آیکون‌های آن را از این آدرس مشاهده کنید.

مطالب زیر را حتما بخوانید

ساخت فرم ورود و پروفایل کاربری در وردپرس با افزونه‌ user registration (بخش دوم)

ساخت فرم ورود در وردپرس با کمک افزونه‌ی قدرتمند user registration بدون نیاز به کد نویسی امکان پذیر است. در...

خطای 404 چیست؟ آموزش رفع خطای 404

حتماً بارها حین مراجعه به و‌بسایتی خطای 404 را در مرورگر خود دیده‌اید. در این مقاله قصد داریم بررسی کنیم...

آموزش کار با افزونه‌ی Wp Rocket وردپرس

افزونه‌ی Wp Rocket را نصب کنید تا با انجام عمل کش، شاهد افزایش چشم‌گیر سرعت سایت خود باشید. ما در...

۱۵ روش رایگان برای افزایش بازدید سایت

۱۵ روشی که بدون هزینه کردن می‌توانید ترافیک و بازدید سایت را افزایش دهید، در این مقاله بخوانید.

آموزش افزایش حجم آپلود در وردپرس

گاهی نیاز داریم تا فایل‌هایی بزرگتر از حجم تعیین شده در وردپرس را آپلود نماییم. در این صورت باید روش‌های...

آموزش بکاپ‌گیری و بازگردانی بکاپ در وردپرس با افزونه UpdraftPlus

بکاپ گیری و بازگردانی آن در وردپرس کار سختی نیست. کافیست کار با افزونه‌ی قدرتمند UpdraftPlus را بیاموزید.

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

یک پاسخ به “فونت آیکون چیست؟ معرفی فونت آیکون‌های محبوب”

  1. علیرضا وحدانی گفت:

    بسیار عالی و روان…
    با تشکر از تیم ادمین سایت

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *