W3.CSS- pictogrammen
Icoonbibliotheken
Met W3.CSS kunt u de gewenste pictogrambibliotheek gebruiken, zoals:
- Lettertype Awesome-pictogrammen
- Google Material Design-pictogrammen
- Bootstrap-pictogrammen
Een pictogrammenbibliotheek gebruiken
Een pictogram invoegen:
- Neem de pictogrambibliotheek van een CDN (Content Delivery Network) op in de sectie <head>.
- Voeg de naam van de pictogramklasse toe aan elk inline HTML-element.
Tip: De elementen <i> en <span> worden veel gebruikt om pictogrammen toe te voegen.
Om de grootte van het pictogram te bepalen, wijzigt u de eigenschap font-size van het pictogram of gebruikt u een van de w3- grootteklassen :
- w3-tiny
- w3-klein
- w3-groot
- w3-xxgroot
- w3-xxxgroot
- w3-jumbo
Enkele geweldige lettertype-pictogrammen
fa fa-thuis
fa-bars
fa fa-pijl-links
fa fa-pijl-rechts
fa fa-zoeken
fa fa-close
fa fa-refresh
fa fa-trash
doet pijn
fa fa-car
fa fa-truck
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>
Voor een volledige lijst met pictogrammen: Bezoek onze pictogramreferentie
Enkele Google Material Design-pictogrammen
huis
huis
huis
menu
menu
menu
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
zoekopdracht
zoekopdracht
zoekopdracht
dichtbij
dichtbij
dichtbij
verversen
verversen
verversen
verwijderen
verwijderen
verwijderen
persoon
persoon
persoon
routebeschrijving_auto
routebeschrijving_auto
routebeschrijving_auto
local_shipping
local_shipping
local_shipping
lokale_luchthaven
lokale_luchthaven
lokale_luchthaven
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 Bootstrap-pictogrammen
huis
menu hamburger
arrow_back
arrow_forward
zoekopdracht
verwijderen
verversen
afval
gebruiker
het dossier
afdrukken
vlak
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>