W3.CSS ikonkalar
Unicode ikonkalar
Ko‘plab keng tarqalgan ikonkalar Unicode belgilari sifatida mavjud.
Home
Menu
Qidiruv
Yopish
Yangilash
Tasdiq
Ogohlantirish
Yulduz
Sozlamalar
Ma’lumot
Unicode ikonkalar uchun ikonkalar kutubxonasi yoki tashqi stil jadvali (stylesheet) kerak emas.
Unicode ikonkalarni W3.CSS o‘lcham va rang klasslari yordamida bezash mumkin:
Misol
<span class="w3-xxlarge w3-text-red">✓</span>
<span class="w3-xxlarge w3-text-blue">★</span>
<span class="w3-xxlarge w3-text-green">⚙</span>
O‘zingiz sinab ko‘ring »
Ko‘plab keng tarqalgan ikonkalar emoji belgilari sifatida ham mavjud, shuning uchun brauzerlar ularni ko‘pincha rangli qilib ko‘rsatadi.
Home
Qidiruv
Chiqindi qutisi
Misol
<div class="w3-xxxlarge">🏠<p class="w3-medium">Home</p></div>
<div class="w3-xxxlarge">🔍<p class="w3-medium">Search</p></div>
<div class="w3-xxxlarge">🗑<p class="w3-medium">Trash</p></div>
Batafsil:
Emojilar brauzer, operatsion tizim va shriftga qarab biroz farqli ko‘rinishi mumkin.
Unicode darsligimizni o‘rganing.
Ikonkalar kutubxonalari
W3.CSS o‘zining ikonkalar kutubxonasiga ega emas.
W3.CSS bilan birga istalgan ikonkalar kutubxonasidan foydalanishingiz mumkin, masalan:
- Font Awesome
- Google Material Icons
- Bootstrap Icons
Ikonkalar kutubxonasidan foydalanish
Ikonkalar kutubxonasidan foydalanish uchun:
- Ikonkalar kutubxonasini
<head>bo‘limiga ulang. - Ikonkani o‘sha kutubxona talab qiladigan sintaksis yordamida qo‘shing.
Ikonkalarni bezash uchun W3.CSS o‘lcham va rang klasslaridan foydalanish mumkin:
Misol
<i class="fa-solid fa-house w3-xxlarge w3-text-red"></i>
Keng qo‘llaniladigan W3.CSS o‘lcham klasslari:
w3-tinyw3-smallw3-largew3-xlargew3-xxlargew3-xxxlargew3-jumbo
Font Awesome ikonkalari
Font Awesome — mashhur ikonkalar kutubxonasi.
Font Awesome stil jadvalini (stylesheet) ulang:
Misol
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css">
So‘ngra Font Awesome klasslari yordamida ikonkalar qo‘shing:
fa-house
fa-bars
fa-arrow-left
fa-arrow-right
fa-magnifying-glass
fa-xmark
fa-rotate-right
fa-trash
fa-user
fa-car
fa-truck
fa-plane
Misol
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-cloud"></i>
<i class="fa-solid fa-trash"></i>
Misol izohi
fa-solid Solid ikonka uslubini tanlaydi.
fa-house House (uy) ikonkasini tanlaydi.
Zamonaviy Font Awesome bir nechta uslub prefikslariga ega, masalan:
fa-solidfa-regular
Eski Font Awesome versiyalarida quyidagicha yoziladi:
class="fa fa-home"
Bu yerda fa — asosiy Font Awesome klassi, fa-home esa ikonkani tanlaydi.
Bootstrap Icons
Bootstrap Icons — alohida ikonkalar kutubxonasi bo‘lib, undan Bootstrap bilan ham, usiz ham foydalanish mumkin.
Bootstrap Icons stil jadvalini (stylesheet) ulang:
Misol
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
So‘ngra Bootstrap Icons klasslari yordamida ikonkalar qo‘shing:
bi-house
bi-list
bi-arrow-left
bi-arrow-right
bi-search
bi-x-lg
bi-arrow-clockwise
bi-trash
bi-person
bi-car-front
bi-truck
bi-airplane
Misol
<i class="bi bi-house"></i>
<i class="bi bi-search"></i>
<i class="bi bi-cloud"></i>
<i class="bi bi-trash"></i>
Google Material Icons
Google Material Icons — Google kompaniyasining ikonkalar kutubxonasi.
Google Material Icons stil jadvalini (stylesheet) ulang:
Misol
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
Google Material Icons kutubxonasida ikonka nomi element kontenti sifatida yoziladi:
home
menu
arrow_back
arrow_forward
search
close
refresh
delete
person
directions_car
local_shipping
local_airport
Misol
<span class="material-icons">home</span>
<span class="material-icons">search</span>
<span class="material-icons">cloud</span>
<span class="material-icons">delete</span>
Ikonkalarni W3.CSS bilan bezash
Ushbu misollardagi ikonkalarni bezash uchun W3.CSS o‘lcham va rang klasslaridan foydalanish mumkin.
Misol
<i class="fa-solid fa-house w3-large w3-text-red"></i>
<i class="fa-solid fa-house w3-xlarge w3-text-green"></i>
<i class="fa-solid fa-house w3-xxlarge w3-text-blue"></i>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!