librerie di icone
Con W3.CSS è possibile utilizzare qualsiasi libreria di icone come:
- Icone impressionanti caratteri
- Google Icone Materiale
- bootstrap Icone
utilizzando le icone
Per utilizzare un'icona, basta aggiungere il nome dell'icona per la classe di un HTML <i> elemento.
Per controllare la dimensione dell'icona, modificare la proprietà font-size dell'icona, o utilizzare le classi dimensionali w3-:
- w3-tiny
- w3-piccole
- w3-large
- w3-XXLarge
- w3-XXXLarge
Icone impressionanti caratteri
fa fa-casa
Fa Fa-bar
fa fa-freccia-sinistra
fa fa-freccia-destra
fa fa-ricerca
fa fa-vicino
fa fa-refresh
fa fa-trash
fa fa-male
fa fa-car
fa fa-camion
fa fa-plane
Esempio
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud
w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud
w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud
w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
Prova tu stesso " 
Per un elenco completo delle icone: Visita il nostro riferimento di un'icona
Google Material Design Icons
casa
casa
casa
Menu
Menu
Menu
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
ricerca
ricerca
ricerca
vicino
vicino
vicino
ricaricare
ricaricare
ricaricare
cancellare
cancellare
cancellare
persona
persona
persona
directions_car
directions_car
directions_car
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
Esempio
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">cloud</i>
<i class="material-icons w3-large">cloud</i>
<i
class="material-icons w3-xlarge">cloud</i>
<i class="material-icons
w3-xxlarge">cloud</i>
<i class="material-icons w3-xxxlarge">cloud</i>
<i
class="material-icons w3-text-teal" style="font-size:64px">cloud</i>
</body>
</html>
Prova tu stesso " bootstrap Icone
casa
menu hamburger
arrow_back
arrow_forward
ricerca
Rimuovere
ricaricare
spazzatura
utente
file
stampare
aereo
Esempio
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon
glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud w3-large"></i>
<i class="glyphicon glyphicon-cloud w3-xlarge"></i>
<i class="glyphicon
glyphicon-cloud w3-xxlarge"></i>
<i class="glyphicon glyphicon-cloud
w3-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
Prova tu stesso "