Icone CSS
Le icone possono essere facilmente aggiunte alla tua pagina HTML, utilizzando una libreria di icone.
Come aggiungere icone
Il modo più semplice per aggiungere un'icona alla tua pagina HTML è con una libreria di icone, come Font Awesome.
Aggiungi il nome della classe icon specificata a qualsiasi elemento HTML inline (come <i>
o
<span>
).
Tutte le icone nelle librerie di icone sottostanti, sono vettori scalabili che possono essere personalizzati con CSS (dimensioni, colore, ombra, ecc.)
Icone fantastiche dei caratteri
Per utilizzare le icone di Font Awesome, vai su
fontawesome.com , accedi e ottieni un codice da aggiungere nella <head>
sezione della tua pagina HTML:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Leggi di più su come iniziare con Font Awesome nel nostro tutorial di Font Awesome 5 .
Nota: non è richiesto alcun download o installazione!
Esempio
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
Risultato:
Per un riferimento completo di tutte le icone di Font Awesome, visita il nostro Icon Reference .
Icone Bootstrap
Per utilizzare i glyphicon Bootstrap, aggiungi la seguente riga all'interno della <head>
sezione della tua pagina HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Nota: non è richiesto alcun download o installazione!
Esempio
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
Risultato:
Icone di Google
Per utilizzare le icone di Google, aggiungi la seguente riga all'interno della <head>
sezione della tua pagina HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Nota: non è richiesto alcun download o installazione!
Esempio
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
Risultato:
Per un elenco completo di tutte le icone, visita il nostro Tutorial sulle icone .