افزودن آیکون در CSS
در گذشته برای افزودن آیکون های سایت از تگ img یا ویژگی background-image استفاده می شد، اما این روش باعث:
- سنگین شدن سایت به دلیل تعداد زیاد آیکون ها
- پایین آمدن سرعت سایت به دلیل بالا رفتن تعداد درخواست ها (requests)
- بی کیفیت شدن آیکون ها با بزرگ شدن اندازه آنها
- عدم تغییر رنگ آیکون ها
می شد.
اما امروزه با کمک کتابخانه هایی مانند font-awesome و google material icon و bootstrap icon این مشکل حل شده است.
نکته: این کتابخانه ها مجموعه ای از تعداد زیادی آیکون است که در قالب یک فونت ارائه شده است. به همین دلیل دیگر شما توانایی تغییر رنگ و اندازه آن، بدون افت کیفیت و در یک کلام توانایی مدیریت آیکون ها، مانند متن را دارید.
آموزش Font Awesome
همانطور که گفته شد، این آیکون ها فونت هستند. به سایت www.fontawesome.com رفته پس از ثبت نام و ورود به آن، برای خود یک کیت بسازید. یک اسکریپت همانند اسکریپت زیر به شما می دهد.
<script src="https://kit.fontawesome.com/e6d50e4572.js" crossorigin="anonymous"></script>تگ script را در head اضافه کنید. سپس در بخش جستجو، آیکون خود را جستجو کنید. کد آیکون ها، یک تگ i با دو کلاس CSS است. مانند زیر:
<i class="fa-solid fa-thumbs-up"></i>نتیجه نهایی شبیه کد زیر می شود.
<!doctype html>
<html>
<head>
<script src="https://kit.fontawesome.com/e6d50e4572.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fa-solid fa-thumbs-up"></i>
</body>
</html>آموزش Google Material Icon
Google Material Icon، یکی دیگر از راه های استفاده از آیکون ها می باشد.
برای دسترسی Google Font در سایت خود، لینک زیر را در المان head قرار دهید.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />در سایت www.fonts.google.com/icons می توانید آیکون خود را جستجو کنید. کد آیکون ها، یک تگ span با یک کلاس CSS است. مانند زیر:
<span class="material-symbols-outlined">check</span>نتیجه نهایی شبیه کد زیر می شود.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
<span class="material-symbols-outlined">check</span>
</body>
</html>خلاصه درس
در این درس با آیکون ها در CSS:
- آموزش Font Awesome
- آموزش Google Material Icon
آشنا شدیم.
احسان اسلامی
