Icone W3.CSS
Biblioteche di icone
Con W3.CSS puoi usare la libreria di icone che ti piace, come ad esempio:
- Icone fantastiche dei caratteri
- Icone del design dei materiali di Google
- Icone Bootstrap
Utilizzo di una libreria di icone
Per inserire un'icona:
- Includere la libreria di icone da una CDN (Content Delivery Network) nella sezione <head>.
- Aggiungi il nome della classe icon a qualsiasi elemento HTML inline.
Suggerimento: gli elementi <i> e <span> sono ampiamente utilizzati per aggiungere icone.
Per controllare la dimensione dell'icona, modificare la proprietà font-size dell'icona o utilizzare una delle classi w3- size :
- w3-piccolo
- w3-piccolo
- w3-grande
- w3-xxgrande
- w3-xxxgrande
- w3-jumbo
Alcune icone fantastiche dei caratteri
fa fa-casa
fa-bar
fa fa-freccia-sinistra
fa fa-freccia-destra
fa fa-cerca
fa fa-vicino
fa fa-refresh
fa fa-spazzatura
fa fa-male
fa fa-macchina
fa fa-camion
fa fa-aereo
Esempio
<!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>
Per un elenco completo delle icone: Visita il nostro riferimento alle icone
Alcune icone di Google Material Design
casa
casa
casa
menù
menù
menù
freccia_indietro
freccia_indietro
freccia_indietro
freccia_avanti
freccia_avanti
freccia_avanti
ricerca
ricerca
ricerca
chiudere
chiudere
chiudere
ricaricare
ricaricare
ricaricare
eliminare
eliminare
eliminare
persona
persona
persona
indicazioni_auto
indicazioni_auto
indicazioni_auto
spedizione_locale
spedizione_locale
spedizione_locale
aeroporto_locale
aeroporto_locale
aeroporto_locale
Esempio
<!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>
Alcune icone Bootstrap
casa
menù hamburger
freccia_indietro
freccia_avanti
ricerca
rimuovere
ricaricare
spazzatura
utente
file
Stampa
aereo
Esempio
<!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>