فونت آیکون یا Icon fonts به زبان ساده به فونت هایی گفته می شود که شامل سمبل ها (Symbols) و Glyphs به جای اعداد و حروف هستند. این فونت آیکون ها نزد طراحان وب از محبوبیت خاصی برخوردار هستند زیرا شما می توانید همانند متن معمولی آن ها را با CSS استایل دهی کنید.در ادامه این مقاله شما را با انواع Icon Font های محبوب آشنا خواهیم کرد، همراه داتیس نتورک باشید.
فونت آیکون چیست؟
آیکون ها همیشه در طرح‌های گرافیکی یکی از نقش‌های اصلی را ایفا می‌کنند! و از آنجا که طراحی قالب وبسایت نیز در واقع یک طرح گرافیکی است، از این قاعده عقب نمانده و به وضوح نقش آیکون‌ها در آن دیده می‌شود.
در گذشته نه چندان دور، آیکون‌ها را بصورت یک فایل تصویر در طراحی استفاده می‌کردند. اما اینکار چند اشکال اساسی داشت:
- تصاویر حجم زیادی دارند و این امر می‌توانست سرعت وبسایت را کم کرده و یا استفاده شما از آیکون را محدود کند.
- نمی‌توانستیم سایز آیکون‌ها را تغییر دهیم، چرا؟ چون تصویر بود و تغییر سایز تصویر از کیفیت آن کم می‌کند.
- نمی‌توانستیم رنگ آیکون‌ها را تغییر دهیم و…
- سرعت برنامه نویسان و طراحان سایت کاهش پیدا می کرد.
خب روش قبل دیگر استفاده نمی شود و امروزه کمتر کسی از آن استفاده می‌کند. برای حل تمام مشکل‌های گفته شده راه حلی ارائه شد بنام فونت آیکون یا Icon Font، مجموعه‌ای از آیکون‌های متناسب باهم که بصورت بُرداری طراحی شده و همه آنها در یک فایل فونت گنجانده شده‌اند.
نحوه استفاده از Icon Font
بطور کلی برای استفاده از یک Icon Font دو راه پیش روی شماست.
راه اول دانلود فایل‌های فونت است. معمولا وقتی یک فونت آیکون را دانلود می‌کنید در آن فایل‌های مربوط به فونت و یک فایل CSS وجود دارد.
شما کافیست فایل CSS آن را به پروژه خود اضافه کنید و فایل های فونت را در مکان مناسبی قرار دهید.
راه دوم استفاده از CDN است، در این روش تنها کافیست تا یک تگ Link را در عنصر Head کدهای قالب خود اضافه کنید. این تگ را معمولا در یک فایل راهنما یا در وبسایت آن فونت آیکون می‌توان پیدا کرد.
نحوه فراخوانی و نمایش آیکون‌ها در Icon Font های مختلف، متفاوت است. برای دیدن لیست آیکون‌های موجود در Icon Font و نحوه استفاده از آنها بهتر است به وبسایت رسمی آنها مراجعه کنید.
معرفی Icon Font های محبوب
با یک جستجوی ساده در گوگل می توانید بسیاری از Icon Font های محبوب درطراحی وب را بشناسید، ما در اینجا چند Icon Font محبوب را معرفی می کنیم.
Font Awesome Icons
به جرات می شود گفت که Font awesome Icons محبوب ترین فونت آیکون در وب فارسی است. این Icon Font در دو نسخه Free و Pro ارائه می شود.
فرق این دو نسخه در تعداد اعداد آیکون است.
مثال:
<!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </head> <body> <p>Some Font Awesome icons:</p> <i class="fas fa-cloud"></i> <i class="fas fa-heart"></i> <i class="fas fa-car"></i> <i class="fas fa-file"></i> <i class="fas fa-bars"></i> <p>Styled Font Awesome icons (size and color):</p> <i class="fas fa-cloud" style="font-size:24px;"></i> <i class="fas fa-cloud" style="font-size:36px;"></i> <i class="fas fa-cloud" style="font-size:48px;color:red;"></i> <i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i> </body> </html>
Bootstrap Icons
این فونت آیکون مخصوص فریم ورک Bootstrap است که دارای آیکون های زیبا می باشد، و نحوه استفاده از آن هم در مثال زیر شرح داده شده است.
مثال:
<!DOCTYPE html> <html> <head> <title>Bootstrap Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body class="container"> <p>Some Bootstrap icons:</p> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-remove"></i> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-envelope"></i> <i class="glyphicon glyphicon-thumbs-up"></i> <br><br> <p>Styled Bootstrap icons (size and color):</p> <i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i> <i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i> <i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i> <i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i> </body> </html>
Google Icons
فونت آیکون Google یکی از زیبا ترین آیکون های موجود است، و استفاده از این فونت آیکون بسیار ساده است، و تنها کافی است که این فونت را از CDN گوگل فراخوانی کنید.
مثال:
<!DOCTYPE html> <html> <head> <title>Google Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <p>Some Google icons:</p> <i class="material-icons">cloud</i> <i class="material-icons">favorite</i> <i class="material-icons">attachment</i> <i class="material-icons">computer</i> <i class="material-icons">traffic</i> <br><br> <p>Styled Google icons (size and color):</p> <i class="material-icons" style="font-size:24px;">cloud</i> <i class="material-icons" style="font-size:36px;">cloud</i> <i class="material-icons" style="font-size:48px;color:red;">cloud</i> <i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i> </body> </html>
امیدوارم این مقاله برای شما مفید بوده باشد.
داتیس نتورک را در شبکه های اجتماعی دنبال کنید.
