شروع پرقدرت آموزش HTML و CSS [ ورود به دنیای هیجان انگیز وب! ]

30% تخفیف برای مدت محدود!

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


نویسنده:
جمعه ۱۴ تیر ۱۳۹۸

فونت آیکون چیست؟
چرا باید از فونت آیکون استفاده کنیم؟
نحوه استفاده از 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 گوگل فراخوانی کنید.

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

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

حمله DDOS چیست؟ انواع حملات DDOS

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

نمایش آیدی در پنل مدیریت وردپرس با افزونه Reveal IDs

در این مقاله نحوه نمایش آیدی در پنل وردپرس (برای پست‌ها، برگه‌ها، دسته‌ها، برچسب‌ها و...) را با استفاده از افزونه...

معرفی ۶ سایت آموزش رایگان طراحی سایت و برنامه نویسی

در این مقاله همراه ما باشید تا با ۶ وب‌سایت آموزش رایگان طراحی وب و برنامه‌نویسی آشنا شوید.

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

دراین مقاله قصد داریم به تفاوت Alt و Title در تصویر+ نحوه اضافه کردن آنها در وردپرس بپردازیم و دلیل...

پکیج آموزش html و css

دوره آموزش HTML و CSS

دوره آموزش HTML و CSS به صورت ویدیویی و پروژه محور : ...

دوره آموزش افزونه EDD

دوره آموزش افزونه EDD

اگر قصد ساخت یک فروشگاه آنلاین برای فروش انواع فایل‌های قابل دانلود ...

آموزش افزایش سرعت سایت

دوره آموزش افزایش سرعت وب‌سایت

مرورگر را باز می‌کنید و آدرس سایتتان را وارد می‌کنید. مرورگر شروع ...

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

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

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

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

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

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