Bootstrap Icons, come aggiungere icone al nostro sito

Rocco Vincybootstrap, icone, SVG

Le icone, se ben posizionate in un sito web, hanno un forte potere comunicativo e possono portare enormi benefici. Inoltre, danno un tocco di stile al design, permettendo ai visitatori di trovare a colpo d’occhio quello che cercano. Ma naturalmente, devono essere usate in modo adeguato.In questo articolo vedremo insieme come aggiungere icone alla nostra interfaccia grafica realizzata con Bootstrap e, in modo particolare, vedremo come usare le recentissime Bootstrap Icons.

Il 28 Agosto 2020 Bootstrap ha annunciato, con un post sul suo blog, il rilascio della versione stabile della sua libraria di icone: Bootstrap Icons v1.0.0.

Sicuramente, questa novità rappresenta un evento importante per l’enorme comunità di sviluppatori che usa il più famoso framework front-end.

Infatti, in passato chi voleva far uso di icone sul proprio sito doveva usare o le popolari Font Awesome o Glyphicons.

In particolare, anche se la libreria Glyphicons non era (e non è) gratuita, i suoi creatori avevano concesso gratuitamente a Bootstrap 3 circa 250 icone in formato Font. Attualmente, la versione 1.0.0, della libraria Bootstrap Icons contiene circa 1100 icone e il team prevede di aggiungerne circa 200 nella prossima versione 1.1.0.

Le icone create da Bootstrap sono state progettate per essere usate con le componenti del framework, ma possono essere usate gratuitamente in un qualsiasi progetto in quanto rilasciate con licenza open source. Inoltre, sono in SVG, perciò sono facili da importare, personalizzare ed estendere.

La sigla SVG vuol dire Scalable Vector Graphics e indica una particolare tecnologia che si basa su XML, che è utilizzata per descrivere oggetti realizzati in grafica vettoriale.

Uno dei principali vantaggi di questa tecnologia sta nel fatto che le immagini vettoriali, anche se rimpicciolite o ingrandite, mantengono sempre la stessa qualità visiva.

Inoltre, le icone SVG sono facili da importare e inserire all’interno delle nostra pagine.

Come installare Bootstrap Icons

Le icone di Bootstrap sono pubblicate come pacchetto npm, quindi possono essere installate usando il comando :

 npm install bootstrap-icons

Ti ricordo che per usare npm devi prima installare NodeJS e npm sul tuo computer. Lo puoi fare scaricando l’installer del pacchetto binario per la tua piattaforma dal sito ufficiale di NodeJS.

In alternativa, le puoi scaricare manualmente da GitHub cliccando qui e cliccando sull’archivio in formato zip dell’ultima versione stabile.

Ma vediamo subito come usare le migliaia di icone messe a disposizione da Bootstrap all’interno delle nostra pagine web.

Come usare Bootstrap Icons

Le icone possono essere inserite all’interno delle pagine web in diversi modi:

copiando il codice dell’icona all’interno della pagina HTML
usando Sprite SVG
come una qualsiasi immagine, usando il tag <img>

Vediamo come fare.

Per inserire direttamente il codice dell’immagine SVG all’interno della tua pagina, segui i seguenti passaggi:

vai sulla pagina con le icone sul sito ufficiale;
individua l’icona che ti serve e cliccaci sopra;
copia il codice dell’immagine nella tua pagina, nel punto in cui vuoi che appaia;
ricordati di modificare le dimensioni, in base alle tue esigenze, cambiando i valori di width e height.

Per esempio, puoi inserire l’icona copiando il seguente codice nel punto in cui vuoi che sia visualizzata:

<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-alarm" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>

Sicuramente un codice più leggibile lo ottieni con gli sprite SVG. Infatti, puoi richiamare qualsiasi icona attraverso il tag <use> e per identificarla devi usare il suo nome(ad esempio, per inserire toggles devi usare #toggles).

In pratica, con gli sprite SVG fai riferimento ad un file esterno come se stessi usando il tag <img>.

Per esempio, se vogliamo richiamare di nuovo la sveglia dovremmo scrivere:

<svg class="bi text-success" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#alarm"/>
</svg>

Ricordati di inserire il percorso corretto del file bootstrap-icons.svg

Infine, come ti ho già detto, puoi richiamare l’icona all’interno del tag <img> come se fosse una qualsiasi immagine in questo modo:

<img src="icons/alarm.svg" alt="" width="32" height="32" title="Sveglia SVG">

Per concludere la nostra panoramica su come usare Bootstrap icons, vediamo come cambiare il colore ad una icona SVG.

Puoi cambiare il colore a una qualsiasi icona semplicemente usando una delle classi di un colore predefinito da Bootstrap o aggiungendo l’attributo style="color:{codicecolore}" all’interno del tag <svg>.

Un esempio ti aiuterà a capire meglio.

Con il seguente codice:

<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-alarm text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>

Il risultato sarà:

Ma lo stesso risultato lo ottieni se aggiungi l’attributo style="color: #28a745" sempre all’interno del tag <svg>

<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-alarm" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color: #28a745">
  ...
</svg>

Conclusioni

Siamo giunti al termine della nostra panoramica sulle icone create e messe a disposizione gratuitamente da Bootstrap.

Come ho detto all’inizio, le icone possono rendere il tuo sito ancora più interessante. Una semplice icona comunica in modo più veloce e immediato rispetto a del testo. Sono come dei segnali stradali, aiutano il visitatore a trovare il giusto percorso.

Continueremo a parlare di Bootstrap e delle sue componenti nei prossimi articoli. Nel frattempo continua a seguirci sulla nostra pagina Facebook e non esitare dal contattarci per qualsiasi informazione o chiarimento.

Articolo successivo ->Creare Slideshow con Bootstrap Carousel

Bootstrap Button: Aggiungere bottoni con Bootstrap <- Articolo precedente