Bootstrap Glyphicons e Font Awesome

Migliaia di glifi gratuiti disponibili

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 01 Marzo 2023
Categoria: Web Marketing Costruzione siti web Bootstrap glyphicons Font awesome

Per ravvivare il proprio sito web è possibile utilizzare sia le Bootstrap Glyphicons che le icone di Font Awesome. Entrambe, rispetto alle immagini, hanno il vantaggio di essere paragonabili a un testo (e quindi godono di minor peso e di facilità di formattazione). Per chi usa i CMS, ad esempio WordPress, può star tranquillo in quanto ogni installazione viene fornita con il set di caratteri icona gratuiti. Leggi anche come creare un sito web con Bootstrap con o senza SASS.

Sommario Bootstrap Glyphicons e Font Awesome

• Bootstrap Glyphicons
• Font Awesome
• Forme con i CSS

Bootstrap Glyphicons

Negli antichi sistemi di scrittura geroglifica, un glifo era un'immagine stilizzata, associata a un significato. La seguente raccolta comprende centinaia di glifi in formato di font. Per inserire un bootstrap glyphicons è necessario scaricare la libreria bootstrap, ma se si vuole evitare un richiamo esterno e il caricamento di un codice smisurato, si può estrarre in un foglio di stile, ad esempio interno, solo quanto necessario richiamando la seguente dicitura:
@font-face{font-family:'Glyphicons Halflings';
src:url(fonts/glyphicons-halflings-regular.eot);
src:url(fonts/glyphicons-halflings-regular.eot?#iefix)
format("embedded-opentype"),url(fonts/glyphicons-halflings-regular.woff2)
format("woff2"),url(fonts/glyphicons-halflings-regular.woff)
format("woff"),url(fonts/glyphicons-halflings-regular.ttf)
format("truetype"),url(fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular)format("svg")}
.glyphicon{
position:relative;
top:1px;
display:inline-block;
font-family:'Glyphicons Halflings';
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}

Essa utilizza la direttiva @font-face per i font da usare, mentre con font-family assegna un nome al font e con src richiama gli URL dei font nei formati utilizzati per le pagine web:
EOT (Embedded OpenType), TTF (TrueType Font), WOFF (Web Open Font Format), SVG (Scalable Vector Graphics).

Successivamente va richiamato, sempre nel CSS, la classe relativa al glifo, ad esempio l'asterisco:
.glyphicon-asterisk:before{content:"\002a"}

Infine nel body, va inserita la classe:
<span class="glyphicon glyphicon-asterisk"></span>
alla quale è associabile un CSS, per esempio in linea, per la formattazione

Dal seguente link scarica tutti i fonts e i codici (110 KB)

Nella tabella sottostante vanno scelti il nome e il valore alfanumerico che, nell'esempio appena scritto, vanno sostituiti ad asterisk e a\002a

Qui di seguito gli oltre 250 bootstrap glyphicons disponibili. Un glifo per ogni necessità.

Font Awesome

Il discorso è simile per le icone di Font Awesome, è possibile infatti richiamare il file seguente:
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
(stringa disponibile su https://fontawesome.com/start)
E inserire nel body i richiami delle icone preferite usando uno dei due seguenti tag (qui l'esempio è fatto con l'icona dell'igloo):
<i class="fas fa-igloo"></i>
oppure
<span class="fas fa-igloo"></span>

Qui la lista delle circa 1500 icone gratuite https://fontawesome.com/icons?d=gallery&m=free

Forme con i CSS

I CSS sono comunque in grado di creare molti tipi di forme. Basta aggiungere larghezza e altezza e si origina un rettangolo, oppure il raggio (border-radius) e si ottiene una forma arrotondata. Con gli pseudo elementi CSS before e after, è possibile inserire nella pagina HTML un contenuto non presente nel documento e quindi altre due forme oltre all'elemento originale (before inserisce un altro elemento all’inizio del contenuto dell’elemento individuato dal selettore, mentre after lo inserisce a chiudere il contenuto dell’elemento individuato dal selettore). Con questi trucchi è possibile creare molte forme in CSS con un solo elemento HTML e dunque realizzarne tantissime, vediamone alcune.
Il punto d'inizio è creare un div a cui viene assegnato un id, come in quest'esempio: <div id="nomeforma"></div> a cui aggiungere regole CSS opportune.
Ecco le regole per alcune forme:

#quadrato{
width:100px;
height:100px;
background:blue}

#rettangolo{
width:200px;
height:100px;
background:blue}

#cerchio{
width:100px;
height:100px;
background:blue;
border-radius:50%}

#ellisse{
width:200px;
height:100px;
background:blue;
border-radius:100px 50px}

#trapezio{
width:100px;
height:0;
border-bottom:100px solid blue;
border-left:25px solid transparent;
border-right:25px solid transparent}

#parallelogramma{
width:150px;
height:100px;
transform:skew(20deg);
background:blue}

#triangolo-su{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid blue}
*border-top per giù border-right: 50px e border-bottom: 50px per sx border-top: 50px e border-left: 100px e border-bottom: 50px per dx*/

#triangolo-topleft{
width:0;
height:0;
border-top:100px solid blue;
border-right:100px solid transparent}
*border-left per topright border-bottom per bottomleft border-bottom e border-left per bottomright */


Ecco invece le forme che si possono ottenere utilizzando gli pseudo elementi CSS before e after