Icone CSS

Come aggiungere icone

Il modo più semplice per aggiungere icone a una pagina HTML è utilizzare una libreria di icone, come Font Awesome.

Aggiungi il nome della classe dell'icona specificata a qualsiasi elemento HTML inline (ad esempio <i> o <span>).

Tutte le icone della libreria di icone sono vettori scalabili, che possono essere personalizzate con CSS (dimensioni, colori, ombre, ecc.).

Icona Font Awesome

Se desideri utilizzare le icona di Font Awesome, visita fontawesome.com, accedi e ottieni il codice da aggiungere nella sezione <head> della tua pagina HTML:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Leggi di più su come iniziare a utilizzare Font Awesome nel nostro tutorial Font Awesome 5.

Suggerimento:Senza download o installazione!

Esempio

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></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:

Prova da solo

Icona di Bootstrap

Se desideri utilizzare gli icona di Bootstrap, aggiungi la seguente riga nella sezione <head> della tua pagina HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Suggerimento:Senza 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:

Prova da solo

Icona di Google

Se desideri utilizzare gli icona di Google, aggiungi la seguente riga nella sezione <head> della tua pagina HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Suggerimento:Senza 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:

Prova da solo