Ikonkalar darsligi
Ikonkalarni qanday qo‘shish mumkin
Ikonka qo‘yish uchun ikonka klassining nomini istalgan inline HTML elementiga qo‘shing.
Ikonkalarni qo‘shish uchun ko‘pincha <i> va <span> elementlaridan foydalaniladi.
Quyidagi ikonka kutubxonalaridagi barcha ikonkalar masshtablanadigan vektor ikonkalar bo‘lib, ularni CSS yordamida sozlash mumkin (o‘lcham, rang, soya va h.k.)
Font Awesome 5 ikonkalari
Bepul Font Awesome 5 ikonkalaridan foydalanish uchun fontawesome.com saytiga o‘ting va veb-sahifalaringizda ishlatiladigan kodni olish uchun tizimga kiring.
Font Awesome bilan ishlashni qanday boshlash haqida Font Awesome 5 bobimizda batafsil o‘qing.
Eslatma: Hech narsani yuklab olish yoki o‘rnatish shart emas!
Misol
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<!--Get your code at fontawesome.com-->
</head>
<body>
<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>
</body>
</html>
O‘zingiz sinab ko‘ring »
Font Awesome 4 ikonkalari
Font Awesome 4 ikonkalaridan foydalanish uchun HTML sahifangizning <head> bo‘limiga quyidagi qatorni qo‘shing:
Eslatma: Hech narsani yuklab olish yoki o‘rnatish shart emas!
Misol
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
O‘zingiz sinab ko‘ring »
Bootstrap 3 ikonkalari
Bootstrap 3 glyphicon’laridan foydalanish uchun HTML sahifangizning <head> bo‘limiga quyidagi qatorni qo‘shing:
Eslatma: Hech narsani yuklab olish yoki o‘rnatish shart emas!
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>
O‘zingiz sinab ko‘ring »Eslatma: Bootstrap 4 da Glyphicons qo‘llab-quvvatlanmaydi.
Bootstrap 3 va Glyphicons haqida batafsil ma’lumot olish uchun Bootstrap 3 darsligimizga tashrif buyuring.
Google ikonkalari
Google ikonkalaridan foydalanish uchun HTML sahifangizning <head> bo‘limiga quyidagi qatorni qo‘shing:
Eslatma: Hech narsani yuklab olish yoki o‘rnatish shart emas!
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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!