Con più di 600 icone, Font Awesome è una delle più grandi raccolte di simboli vettoriali, disponibile gratuitamente. Per incorporare l’icon font in un sito web, gli sviluppatori devono scaricare il pacchetto di installazione dal sito web di Font Awesome. L’inserimento dell’icon font avviene in tre passaggi:
1. Download del pacchetto di installazione
2. Inserimento del foglio di stile (stylesheet) nell’header del documento HTML: per inserire Font Awesome in un sito web, si deve collegare il file CSS standard “font-awesome.min.css”, contenuto nel pacchetto di installazione, al documento HTML corrispondente. Per farlo, bisogna inserire il seguente codice nell’header del documento HTML:
<link rel="stylesheet" href="https://www.ionos.it/digitalguidepath/to/font-awesome/css/font-awesome.min.css"> |
Il comando “path/to/” indica il percorso del file del progetto web sul server.
3. Inserire icone: stabilito il collegamento al file CSS, le icone contenute nel font si possono inserire in qualunque parte del codice sorgente HTML. Per questo entra in azione con Font Awesome un elemento vuoto “i” combinato con l’attributo “class”.
<i class="fa fa-home"></i> |
Il codice per inserire le icone si trova sul sito web di Font Awesome.
Alternativamente all’elemento “i”, un’icona può essere inserita anche con un tag <span>.