Google ikonkalari bilan tanishuv
Asosiy ikonkalar
Google ikonkalaridan foydalanish uchun HTML sahifangizning <head> bo‘limiga quyidagi qatorni qo‘shing:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Eslatma: Hech narsani yuklab olish yoki o‘rnatish shart emas!
Inline elementga material-icons klassini qo‘shing va ikonka nomini kiriting:
Misol
Quyidagi kod:
<!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" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Natija:
cloud cloud cloud
O‘zingiz sinab ko‘ring »
Google ikonkalari inline elementlar bilan ishlatish uchun mo‘ljallangan. Ikonkalar uchun ko‘pincha <i> va <span> elementlaridan foydalaniladi.
Eslatma: Material ikonkalarining standart o‘lchami 24px.
Shuni ham yodda tutingki, ikonka konteynerining rangini o‘zgartirsangiz, ikonkaning rangi ham o‘zgaradi. Xuddi shu narsa soyaga va CSS orqali meros qilib olinadigan boshqa har qanday xususiyatga ham tegishli. Bundan faqat CSS font-size xususiyati mustasno: boshqa qiymat belgilanmagan bo‘lsa, u doim 24px bo‘ladi.
O‘lchamini o‘zgartirish mumkin bo‘lgan ikonkalar
Material ikonkalarini istalgan o‘lchamga masshtablash mumkin bo‘lsa-da, tavsiya etilgan font-size qiymati 18, 24, 36 yoki 48px:
Misol
Quyidagi kod:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; } /* Default */
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons md-48">cloud</i>
Natija:
cloud cloud cloud cloud
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!