آیکون‌ها همیشه در طرح‌های گرافیکی یکی از نقش‌های اصلی را ایفا می‌کنند! و از آنجا که طراحی قالب وبسایت نیز در واقع یک طرح گرافیکی است، از این قاعده مستثناء نمانده و به وضوح نقش آیکون‌ها در آن دیده می‌شود.
در گذشته نه چندان دور، آیکون‌ها را بصورت یک فایل تصویر در طراحی استفاده می‌کردند. اما اینکار چند اشکال اساسی داشت:
تصاویر حجم زیادی دارند و این امر می‌توانست سرعت وبسایت را کم کرده و یا استفاده شما از آیکون را محدود کند.
نمی‌توانستیم سایز آیکون‌ها را تغییر دهیم، چرا؟ چون تصویر بود و تغییر سایز تصویر از کیفیت آن کم می‌کند.
نمی‌توانستیم رنگ آیکون‌ها را تغییر دهیم و…
خب روش قبل منسوخ شده است و امروزه کمتر کسی از آن استفاده می‌کند. برای حل تمام مشکل‌های گفته شده راه حلی ارائه شد بنام فونت آیکون! 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 Icon های محبوب برای طراحی وب
با یک جستجوی ساده در گوگل می‌توانید بسیاری از فونت آیکون‌های محبوب در طراحی وب را بشناسید. ما در اینجا چند فونت آیکون محبوب را معرفی می‌کنیم.
Font Awesome 5
به جرات می‌توان گفت که Font Awesome 5 محبوب‌ترین فونت آیکون در وب فارسی است. این فونت آیکون در دو نسخه Free و Pro ارائه می‌شوند.
در نسخه Pro مجموعاً 7020 آیکون در ضخامت‌های مختلف وجود دارد که البته رایگان نیست و باید آن را از وبسایت رسمی Font Awesome خریداری کنید.
در نسخه Free مجموعاً 1535 آیکون در دو ضخامت مختلف وجود دارد که همانطور که از نامش پیداست بصورت رایگان ارائه می‌شود.
Font Awesome 4
این فونت نسخه قبلی Font Awesome است که نسبت به آخرین ورژن خود یعنی Font Awesome 5 تعداد آیکون‌های کمتری را دربر دارد. این فونت بصورت رایگان ارائه می‌شود.
فونت آیکون Google که یکی از زیباترین فونت آیکون‌های موجود است. استفاده از این فونت بسیار ساده است. و تنها کافیست این فونت را از CDN گوگل فراخوانی کنید.
می‌توانید راهنمای استفاده از این فونت و لیست آیکون‌های آن را از این آدرس مشاهده کنید.
سلام ما از فونت ایکون استفاده کردیم و سرعت لود صفحه اول بالا رفت
بله همینطوره نسبت به تصاویر حجم کمتری دارن
تشکر
بسیار عالی و روان…
با تشکر از تیم ادمین سایت
ممنون از وقتی که برای مطالعه این مطلب گذاشتید