- Blog
- Programmazione
- CSS
- CSS3 - Icone
CSS3 - Icone
- Programmazione
- CSS
- Giuseppe Ventura
- 12/09/2023
Le icone possono essere aggiunte facilmente alla propria pagina HTML, usando una libreria di icone.
Come aggiungere icone
Il modo più semplice di aggiungere un'icona alla propria pagina HTML, è con una libreria di icone, come Font Awesome.
Si aggiunge il nome di una specifica classe di icona a qualunque elemento inline (come <i> o <span>).
Tutte le icone nelle seguenti librerie, sono vettori scalabili che possono essere personalizzati con CSS (dimensione, colore, ombra, ecc.)
Icone Font Awesome
Per usare le icone Font Awesome, si va su fontawesome.com, ci si registra, e si ottiene il codice da aggiungere nella sezione <head> della propria pagina HTML:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
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>
Icone Bootstrap
Per usare le glyphicon Bootstrap, si aggiunge la seguente riga all'interno della sezione <head> della propria pagina HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>">
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>
Icone Google
Per usare le icone Google, si aggiunge la segente riga all'interno della sezione <head> della propria pagina HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
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>