W3.CSS Simgeleri
Simge Kitaplıkları
W3.CSS ile beğendiğiniz simge kitaplığını kullanabilirsiniz, örneğin:
- Yazı Tipi Harika Simgeler
- Google Materyal Tasarımı Simgeleri
- Önyükleme Simgeleri
Simge Kitaplığı Kullanma
Bir simge eklemek için:
- <head> bölümüne bir CDN'den (İçerik Dağıtım Ağı) simge kitaplığını ekleyin.
- Herhangi bir satır içi HTML öğesine simge sınıfının adını ekleyin.
İpucu: <i> ve <span> öğeleri, simge eklemek için yaygın olarak kullanılır.
Simgenin boyutunu kontrol etmek için simgenin font-size özelliğini değiştirin veya w3- size sınıflarından birini kullanın:
- w3-minik
- w3-küçük
- w3-büyük
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
Bazı Yazı Tipi Müthiş Simgeleri
fa ev
fa-barlar
fa-ok-sol
fa fa-ok-sağ
fa-arama
fa-yakın
fa-yenileme
fa-çöp
canı yanmak
fa fa-araba
fa kamyon
fa fa düzlemi
Örnek
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
Simgelerin tam listesi için: Simge referansımızı ziyaret edin
Bazı Google Materyal Tasarımı Simgeleri
ev
ev
ev
Menü
Menü
Menü
ok_back
ok_back
ok_back
ok_forward
ok_forward
ok_forward
Ara
Ara
Ara
kapat
kapat
kapat
yenilemek
yenilemek
yenilemek
silmek
silmek
silmek
kişi
kişi
kişi
Directions_car
Directions_car
Directions_car
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
Örnek
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
Bazı Önyükleme Simgeleri
ev
menü hamburger
ok_back
ok_forward
Ara
kaldırmak
yenilemek
çöp
kullanıcı
dosya
Yazdır
uçak
Örnek
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>