Bootstrap icons, usare fontawesome e Glyphicons icons

In questa lezione parliamo di Bootstrap icons, cioè di come utilizzare le icone in Bootstrap con i Fontawesome e Glyphicons.

Bootstrap icons

Le icone si possono utilizzare nel testo, nei menù, nei form, nei pulsanti e in tanti altri elementi di una pagina web.

Ci sono tante piattaforme che mettono a disposizione queste icone in maniera gratuita, almeno per la versione base.

Glyphicons

Le prime Bootstrap icons, da poter utilizzare, che vi presento sono le Glyphicons.

Fino alla versione Bootstrap 3 trovavamo una cartella con le Glyphicons, ma nella nuova versione è stata tolta.

Si possono sempre utilizzare andando sul sito ufficiale glyphicons e andando a vedere le specifiche di utilizzo. Alcuni set di icone sono però a pagamento.

Quindi basta aggiungere il seguente codice tra il tag head:

<link rel="stylesheet" href="glyphicons/glyphicons.css">

E poi utilizzarle in un punto qualsiasi della pagina, inserendo la classe opportuna. Ad esempio per visualizzare la casetta della home posso utilizzare questo codice.

<span class="glyphicon glyphicon-home" aria-hidden="true"></span>

Oppure per la stampante ad esempio posso usare questo codice:

<span class="glyphicon glyphicon-print"></span>

Potete trovare il codice completo delle icone in questa pagina: glyphicons icone.

Fontawesome

Si possono utilizzare altre Bootstrap icons e le più utilizzare sono i Fontawesome.

Si può andare sul sito ufficiale di Fontawesome e scaricare tutta la cartella.

La cartella webfonts all’interno contiene i caratteri tipografici che il CSS utilizza.

Per utilizzare i fontawesome si può collegare il file all.css che contiene lo stile base più tutti gli stili icona.

Quindi provate ad inserire prima della chiusura del tag head il seguente codice:

<link href="fontawesome/css/all.css" rel="stylesheet">

Chiaramente mettete il vostro percorso al file.

Dopo per utilizzare le icone sarà sufficiente utilizzare il tag i con la classe opportuna.

<i class="fas fa-user"></i>
<i class="fas fa-hands"></i>
<i class="fas fa-hand-point-right"></i>

Per poter combina due icone e dunque creare una forma con un colore, si può sfruttare la potenza di SVG in Font Awesome.

Quindi al posto del precedente collegamento al file all.css inserisco sempre tra il tag head questo script:

<script defer src="fontawesome/js/all.js"></script>

E così è possibile inserire icone come questa:

<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:lightblue"></i>

Potete trovare la lista delle icone complete al seguente link: fontawesome.

Ecco un esempio di utilizzo di icone che ho realizzato a questo link: esempio di icone con Bootstrap.

In questa lezione abbiamo visto come utilizzare le Bootstrap icons ed in particolare Fontawesome e Glyphicons per inserire delle icone nelle nostre pagine web.

Si possono utilizzare altri font per le icone in Bootstrap, come ad esempio Octicons.

Lezione precedente: Bootstrap buttons

Lezione successiva: Bootstrap table