Inserire le icone Font Awesome in una pagina web

Installare il kit di icone ed utilizzarle nelle pagine html del nostro sito

Font Awesome è un kit di icone vettoriali distribuito sotto libera licenza e ci permette di avere a portata di mano un ampio parco di icone, suddiviso per azioni e applicazioni, da utilizzare per web site, e applicazioni web-based.

È possibile usufruire di due tipologie di icone: quelle gratuite, che offrono un pacchetto di oltre 1400 icone, e quelle premium che offrono un pacchetto di oltre 4500 icone. Noi oggi parleremo di come utilizzare il pacchetto free per abbellire il nostro sito, ma la procedura è valida anche sull’utilizzo del pacchetto pro.

Installiamo Font Awesome

Ci basta andare sulla pagina di download di Font Awesome per scaricare il pacchetto, estrarlo e caricarlo sull’hosting che ci interessa abbellire.

All’interno della cartella Font Awesome che abbiamo caricato con FTP è presente un’altra cartella css con all’interno lo stile all.css.

Per inserire le icone vettoriali nella nostra pagina dobbiamo predisporla per la visualizzazione, inserendo la seguente sintassi in testa al nostro file.html

<link href="posizione/fontawesome-free-5.5.0-web/css/all.css" rel="stylesheet">

Dopodiché, in qualunque pagina del sito fontawesome.com è presente una casella di ricerca, soprannominata Search icons… dalla quale è possibile cercare l’icona desiderata tra quelle disponibili. Se ad esempio cerchiamo l’icona di Telegram, dopo aver selezionato tra i risultati ricevuti l’icona che ci interessa, ci viene mostrato il codice da inserire nella pagina html nel punto in cui vogliamo stampare l’icona, in questo caso il codice è il seguente

<i class="fab fa-telegram"></i>

Per poter aumentare o diminiure la dimensione dell’icona dobbiamo aggiungere all’attributo class anche l’opzione di grandezza

<i class="fab fa-telegram fa-3x"></i>

le dimensioni disponibili per le singole icone sono fa-2x, fa-3x, fa-5x e fa-7x.

Controlliamo ciclicamente il funzionamento dei link nei nostri articoli. Se noti dei link che non funzionano segnalacelo tra i commenti. Se hai apprezzato l'articolo considera l'idea di sostenere il blog anche con una piccola donazione. Grazie. Patreon / Ko-fi / Liberapay / Paypal

4 commenti

    1. Salve, bisogna metterla nel nodo html che corrisponde alla posizione che desideri. Se analizzi la pagina web (su Firefox tasto destro > Analizza elemento, su Chrome tasto destro > Ispeziona) la console ti indica dove dovresti posizionare il codice dell’icona che ho indicato nell’articolo.

      Ciao

Rispondi a Valentino Francesco Mannara Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *