آیکون ها (Icons)
آیکون ها (Icons) شکلک های کوچکند. آن ها با «کتابخانه آیکون» خیلی راحت می آیند. بیشترشان «برداری (Vector)» هستند؛ یعنی با CSS بزرگ و کوچک می شوند و کیفیت نمی ریزند. مثل استیکرهای تلگرام، اما در صفحه وب.
چطور آیکون اضافه کنیم؟
ساده ترین راه، استفاده از یک کتابخانه آیکون است؛ مثل Font Awesome.
کلاس آیکون را به یک تگ خطی مثل <i> یا <span> بده. سپس با CSS اندازه، رنگ یا سایه را عوض کن.
Font Awesome
از سایت fontawesome.com وارد شوید و کد kit را در بخش <head> بگذارید. سپس کلاس آیکون را استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"><\/script>
</head>
<body>
<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>
<\/body>
<\/html>
نکته: نصب لازم نیست. فقط اسکریپت kit را لود کن.
Bootstrap Icons (Glyphicons)
برای استفاده از Glyphicons در Bootstrap 3، فایل CSS بوت استرپ را در <head> وارد کن. سپس کلاس های glyphicon را بزن.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<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>
<\/body>
<\/html>
نکته: این روش مخصوص Bootstrap 3 است.
Google Icons (Material Icons)
برای آیکون های گوگل، استایل Material Icons را در <head> اضافه کن. سپس نام آیکون را متن تگ بگذار.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<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>
<\/body>
<\/html>
نکته: آیکون ها برداری اند؛ با CSS اندازه و رنگشان را تغییر بده.
گام های عملی
- کتابخانه آیکون را انتخاب کن.
- کد لینک یا اسکریپت را در
<head>بگذار. - کلاس آیکون را روی
<i>یا<span>اعمال کن. - با CSS اندازه و رنگ را تنظیم کن.
نکته: راهنمای کامل آیکون ها و بخش های مرتبط مثل فونت گوگل و کوتاه نویسی فونت را هم ببین.
جمع بندی سریع
- بهترین راه، استفاده از کتابخانه آیکون است.
- آیکون ها برداری اند و با CSS تغییر می کنند.
- کلاس آیکون را به تگ خطی بده.
- نصب لازم نیست؛ لینک یا اسکریپت کافی است.