Ikony W3.CSS
Knihovny ikon
S W3.CSS můžete používat knihovnu ikon, která se vám líbí, například:
- Písmo úžasné ikony
- Ikony materiálového designu Google
- Bootstrap ikony
Použití knihovny ikon
Postup vložení ikony:
- Zahrňte knihovnu ikon z CDN (Content Delivery Network) do sekce <head>.
- Přidejte název třídy ikony do libovolného vloženého prvku HTML.
Tip: Prvky <i> a <span> se široce používají k přidávání ikon.
Chcete-li ovládat velikost ikony, změňte vlastnost font-size ikony nebo použijte jednu z tříd velikosti w3 :
- w3-maličký
- w3-malý
- w3-velký
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
Některé úžasné ikony písma
fa fa-domov
fa-bary
fa fa-šipka-doleva
fa fa-šipka-vpravo
fa fa-hledání
fa fa-zavřít
fa fa-refresh
fa fa-trash
bolí
fa fa-auto
fa fa-náklaďák
fa fa-letadlo
Příklad
<!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>
Úplný seznam ikon: Navštivte naši referenci na ikony
Některé ikony Google Material Design
Domov
Domov
Domov
Jídelní lístek
Jídelní lístek
Jídelní lístek
šipka_zpět
šipka_zpět
šipka_zpět
šipka_vpřed
šipka_vpřed
šipka_vpřed
Vyhledávání
Vyhledávání
Vyhledávání
zavřít
zavřít
zavřít
Obnovit
Obnovit
Obnovit
vymazat
vymazat
vymazat
osoba
osoba
osoba
trasa_auto
trasa_auto
trasa_auto
local_shipping
local_shipping
local_shipping
místní_letiště
místní_letiště
místní_letiště
Příklad
<!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>
Některé ikony bootstrapu
Domov
menu hamburger
šipka_zpět
šipka_vpřed
Vyhledávání
odstranit
Obnovit
odpadky
uživatel
soubor
tisk
letadlo
Příklad
<!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>