Dummy-X

Informatica a portata di tutti

Inserire le icone Font Awesome in una pagina web

13 Novembre 2018 / DEV / 39 visualizzazioni
Scritto da  

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.

Condividi se l'articolo ti è piaciuto, ci aiuterai a crescere
Francesco
Fondatore e amministratore di Dummy-X dal 2007, condivido interessi, idee, progetti, e soluzioni informatiche. Non vendo prodotti, mi limito a descrivere tecnologie e a mettere a disposizione gli strumenti adatti per poter realizzare idee. Tutto ciò che scrivo è frutto della mia esperienza lavorativa e della mia voglia di imparare. Da sempre studio l'informatica in tutte le sue angolazioni (software, hardware, reti e sicurezza) e negli ultimi anni mi sono specializzato nello sviluppo di web applications. Sono sempre aperto a nuove sfide e alla ricerca e conoscenza delle nuove tecnologie.

Lascia un commento

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