Belgilar (Icons)

CSS Belgilar (Icons)

HTML sahifangizga belgi qo'shish juda oson. Buning uchun maxsus belgi kutubxonasidan foydalanishingiz mumkin.

Belgilarni qanday qo'shish mumkin

HTML sahifangizga belgi qo'shishning eng oddiy usuli — bu Font Awesome kabi belgi kutubxonasidan foydalanishdir.

Belgilangan ikonka klassining nomini HTML elementiga (masalan, <i> yoki <span> elementiga) qo'shing.

Quyidagi belgi kutubxonalaridagi barcha belgilar CSS yordamida o'lchami, rangi, soyasi va boshqalar bilan sozlanishi mumkin bo'lgan skalali vektorlar hisoblanadi.

Font Awesome Belgilari

Font Awesome belgilaridan foydalanish uchun fontawesome.com saytiga o'ting, tizimga kiring va HTML sahifangizning <head> bo'limiga qo'shish uchun kodni oling:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Font Awesome bilan boshlash haqida ko'proq ma'lumotni Font Awesome 5 darsimizda o'qing.

Eslatma

Yuklab olish yoki o'rnatish talab qilinmaydi!

Misol

<!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>

Bootstrap Belgilari

Bootstrap glyphicons belgilaridan foydalanish uchun HTML sahifangizning <head> bo'limiga quyidagi qatorni qo'shing:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Eslatma: Yuklab olish yoki o'rnatish talab qilinmaydi!

Misol

<!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>

Google Belgilari

Google belgilaridan foydalanish uchun HTML sahifangizning <head> bo'limiga quyidagi qatorni qo'shing:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Eslatma: Yuklab olish yoki o'rnatish talab qilinmaydi!

Misol

<!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>

Belgilar to'liq ro'yxati uchun Ikonka Darsimizni ko'rib chiqing.

CSS Belgilar (Icons)

Belgilarni qanday qo'shish mumkin

Font Awesome Belgilari

Bootstrap Belgilari

Google Belgilari

Ushbu sahifada