W3.CSS- ikone
Ikoon biblioteke
Met W3.CSS kan jy die ikoonbiblioteek gebruik waarvan jy hou, soos:
- Font Awesome ikone
- Google Materiaalontwerp-ikone
- Bootstrap-ikone
Gebruik 'n ikoonbiblioteek
Om 'n ikoon in te voeg:
- Sluit die ikoonbiblioteek vanaf 'n CDN (Content Delivery Network) by die <head>-afdeling in.
- Voeg die naam van die ikoonklas by enige inlyn HTML-element.
Wenk: Die <i>- en <span>-elemente word wyd gebruik om ikone by te voeg.
Om die grootte van die ikoon te beheer, verander die lettertipe-eienskap van die ikoon, of gebruik een van die w3 -grootte klasse:
- w3-klein
- w3-klein
- w3-groot
- w3-xxgroot
- w3-xxxgroot
- w3-jumbo
Sommige Font Awesome ikone
fa fa-huis
fa-stawe
fa fa-pyl-links
fa fa-pyl-regs
fa fa-soektog
fa fa-close
fa fa-verfris
fa-asblik
maak seer
fa fa-motor
fa-vragmotor
fa fa-vliegtuig
Voorbeeld
<!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>
Vir 'n volledige lys ikone: Besoek ons ikoonverwysing
Sommige Google-materiaalontwerp-ikone
tuis
tuis
tuis
spyskaart
spyskaart
spyskaart
pyl_terug
pyl_terug
pyl_terug
pyl_vorentoe
pyl_vorentoe
pyl_vorentoe
Soek
Soek
Soek
naby
naby
naby
verfris
verfris
verfris
skrap
skrap
skrap
persoon
persoon
persoon
aanwysings_motor
aanwysings_motor
aanwysings_motor
plaaslike_versending
plaaslike_versending
plaaslike_versending
plaaslike_lughawe
plaaslike_lughawe
plaaslike_lughawe
Voorbeeld
<!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>
Sommige selflaai-ikone
tuis
spyskaart hamburger
pyl_terug
pyl_vorentoe
Soek
verwyder
verfris
asblik
gebruiker
lêer
druk
vliegtuig
Voorbeeld
<!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>