خواندن ۳ دقیقه·۳ سال پیش

فونت آیکون (icon font) چیست ؟

تا حالا شده توی طراحی وبسایتتون با مشکلاتی برای بارگذاری یک نماد برای یک کار به مشکل خورده باشید ؟ مثلا همین نماد دانلود

اگه بخوایم به صورت عکس و با فرمت های png ,jpg و ... ازش استفاده کنیم خیلی دستمون تنگ میشه و به خیلی از مشکلات میخوریم . به عنوان مثال :

عکس حجم زیادی داره که باعث کندتر شدن سرعت سایت میشه
زمانی که عکس را بزرگتر میکنیم کیفیت آن کاهش میابد
اگه بخواهیم تغیراتی توی عکس بدیم خیلی کارمون سخت میشه و نیاز به نرم افزار های سنگین مثل فوتوشاپ داره

اما این معایب در فونت آیکون ها نیست ، چرا ؟
چون فونت آیکون ها نوعی فونت هستند یعنی با آنها نه به صورت عکس بلکه به صورت مجموعی از بردار ها(vectorها) هستند

پس یعنی :

چون فونت هستند با بزگتر شدنشون در صفحه کاهش کیفیت پیدا نمیکنند
چون به صورت چند تا عدد (اعدادی که بردار رو تشکیل میدن ) ساخته شدن پس حجم سنگینی ندارن وسرعت سایت رو بهبود میدهند
چون در زبان css ساخته میشوند پس به راحتی میتوان آنها را در css تغییر داد (مثلا میتوان به آنها رنگ داد یا شکلشون رو تغییر داد )
با فونت ها میشود سمبل های بیشتری در یک سایت گذاشت زیرا سبب کند شدن سایت نمیشود و سمبل های بیشتر در سایت یعنی افزایش سرعت کاربران در درک مطالب و استفاده بیشتر آنها از امکانات سایت

اما با اینکه فونت ایکون خیلی از انتظارات ما را عملی کرده معایبی نیز دارد که بزرگترینشان عدم توانایی خلق تصاویر پیچیده توسط فونت آیکون است به عنوان مثال در فونت آیکون هیچگاه نمیتوان عکسی مانند عکس زیر خلق کرد

اما حالا چگونه از فونت آیکون استفاده کنیم؟
ما دو روش برای استفاده از آنها داریم :

1- استفاده از cdn : در این روش طبق کد های پایین از فایل css ای که توسط توسعه دهنده های فونت آیکون ایجاد و بر روی بستر وب گذاشته شده استفاده میکنیم .

<!DOCTYPE html>
<html>
<head>
<link rel=&quotstylesheet&quot href=&quothttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot>
</head>
<body>

<i class=&quotfa fa-car&quot></i>
<i class=&quotfa fa-car&quot style=&quotfont-size:48px;&quot></i>
<i class=&quotfa fa-car&quot style=&quotfont-size:60px;color:red;&quot></i>

</body>
</html>

همانطور که در شکل میبینیم فایل فونت آیکون های روی وب رو به فایل html مون وصل میکنیم حالا برای استفاده از آیکون ها باید از تگ <i></i> استفاده کنیم و برای مشخص کردن فونت آیکون مورد نظرمون باید کلاس اون آیکون رو در تگ <i> مشخص کنیم که در اینجا یک ماشین به عنوان آیکون ما انتخاب شده است پس کلاس fa fa-car برای اون تگ گذاشته میشه . و اگه خواستید سایز و رنگ آیکون رو تغییر بدید مانند بالا از font-size و color استفاده کنیم .

2- استفاده از فایل فونت آیکون روی سرور : گاهی اوقات امکان عوض شدن آدرس های فایل آیکون ها بر روی وب وجود دارد بنابراین بعضی از توسعه دهندگان وب تصمیم میگیرند به جای استفاده از cdn فایل خود فونت آیکون ها را دانلود کنند و از آنها استفاده کنند .استفاده از فایل سرور با cdn هیچ فرقی در نحوه ی استفاده آیکون ها ایجاد نمیکند فقط باید به جای آدرس فونت آیکون در وب در href آدرس خود فایل آیکون ها را روی سرور خود سایت بدهد .

نکته : فونت آیکون های ساخته شده دارای منابعی هستند که ما در کد بالایی از منبع font awsome 4 استفاده کردیم

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

منبع fontawesome 5 : این منبع شامل حدود 7800 آیکون در نسخه پولی خود دارد و حدود 1500 آیکون در نسخه رایگان خود دارد
منبع font awesome 5 : این منبع شامل حدود 7800 آیکون در نسخه پولی خود دارد و حدود 1500 آیکون در نسخه رایگان خود دارد
منبع bootstrap 3
منبع google icons

نکته : در بین منابع بالا font awesome 4 و google icons نیازی به دانلود فایل ندارند و میتوان برای استفاده از آنها از cdn استفاده کرد ولی بقیه نیاز به دانلود دارند

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

https://www.w3schools.com/icons/default.asp

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

ارشیا مخلص

فونت آیکون icon font فرانت اند توسعه وب بهبود طراحی وب

arshia

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

شاید از این پست‌ها خوشتان بیاید