Le icone, se posizionate in modo strategico in un sito web, possono avere un forte potere comunicativo e possono portare a una serie di benefici. Inoltre, danno anche un tocco in più di stile permettendo agli utenti di trovare subito ciò che cercano durante la navigazione. Naturalmente, affinché tutto ciò possa avvenire con successo, devono essere utilizzate in modo adeguato, seguendo dei criteri ben precisi.

In tal senso, esiste un framework di sviluppo web gratuito e open space progettato per facilitare il procedimento di sviluppo web di siti web responsive e “mobile first”. Si tratta di Bootstrap, che può essere un valido aiuto per gli sviluppatori web nella creazione di siti in modo più rapido, in quanto viene fornita una raccolta di sintassi per i modelli di progettazione e non devono preoccuparsi dei comandi o delle funzioni base.

Il framework consiste in script basati su HTML, CSS e JS per le varie funzioni e componenti relative al web design. Le icone prodotte da Bootstrap sono progettate per essere utilizzate insieme alle componenti del framework, ma possono anche essere usate gratuitamente in qualsiasi progetto, perché rilasciate con licenza open source. Scopriamo insieme come funzionano e che tipo di caratteri sono.

Funzioni base

Lo scopo principale di Bootstrap è quello di realizzare siti web, in modo che tutti gli elementi dell’interfaccia di un sito web possano funzionare bene su tutte le dimensioni dello schermo. Bootstrap è disponibile in due versioni: precompilato oppure basato su una versione del codice sorgente. 

Gli sviluppatori esperti preferiscono quest’ultima tipologia perché consente loro di personalizzare gli stili a seconda dei loro progetti. La versione “codice sorgente” di Bootstrap permette di accedere alla porta Sass. Questo vuol dire che crea un foglio di stile personalizzato, importato da Bootstrap, e che permette di modificare ed estendere lo strumento a seconda delle necessità dell’utente.

Il framework viene ampiamente apprezzato dagli sviluppatori perché le funzioni base permettono di installare, con un gestore di pacchetti, uno strumento che si occupa della gestione e aggiornamento delle librerie e delle risorse. Alcuni componenti dell’interfaccia comprendono le barre di navigazione, i sistemi di griglie, i caroselli di immagini e vari pulsanti.

Le icone possono essere inserite all’interno delle pagine web in modi differenti: copiando il codice dell’icona all’interno della pagina HTML, usando Sprite SVG oppure come una qualsiasi immagine utilizzando il tag <img>.

Facilità d’uso

Bootstrap è semplice da imparare e utilizzare. Per via della sua fama, sono disponibili in rete diversi video-tutorial e forum online che spiegano come approcciarsi al programma. Uno dei motivi della sua popolarità tra gli sviluppatori web e i web designer è la facilità d’uso e il fatto che possieda la struttura di file semplice. I suoi file sono pre-compilati in modo da rendere agevole l’accesso e necessitano solamente della conoscenza base di HTML, CSS e JS per essere modificati.

E’ possibile anche utilizzare temi per i vari sistemi di gestione dei contenuti come strumenti di apprendimento. La maggior parte dei temi WordPress è stata sviluppata utilizzando web Boostrap, utilizzabile anche dagli sviluppatori web principianti. Per aumentare il tempo di caricamento della pagina del sito, il programma riduce i file CSS e JavaScript. Inoltre, mantiene la coerenza nella sintassi tra siti web e sviluppatori, un parametro ideale per i progetti basati su team.

Glyphicons: che cosa sono?

Le icone sono la parte fondamentale di un sito web, perché spesso mostrano azioni e dati all’interno dell’interfaccia utente. Bootstrap utilizza delle icone che sono chiamate Glyphicons che includono un set Glyphicons Halflings. Nonostante il design sia di base, svolgono ugualmente le loro funzioni essenziali e sono gratuiti.

Si tratta di icone formattate con font disponibili in Boortstrap e sono circa 200. Si possono trovare glyphicons di vario genere che aiutano ad indicare quasi tutte le azioni come lo zoom, la modifica, l’avviso, l’inserimento/scaricamento file, l’eliminazione, e sono definiti in una singola classe.

Per trovare icone più particolari ed eleganti puoi usufruire dei vari set premium pensati per i siti specifici di nicchia. E’ possibile, anche, scaricare icone singole e specifiche per un tema, in modo gratuito, su vari siti web, come ad esempio Flaticon, GlyphSearch e Icons8. Per potere modificare la dimensione delle icone basta sovrascrivere lo stile predefinito con la proprietà “font-size CSS”.

Come utilizzarle?

Le icone si possono utilizzare nel testo, all’interno dei menu, nei form, nei pulsanti e in molti altri elementi che compongono una pagina web. Le Glyphicons, in particolare, sono quelle già incluse in Bootstrap 3, e per inserirle basta aggiungere una riga di codice tra il “tag head” e poi utilizzarle su qualsiasi punto della pagina inserendo la classa opportuna.

Dal momento che nella nuova versione di Bootstrap non è più possibile trovare la cartella con le Glyphicons, perché rimossa, le icone possono essere scaricate su varie piattaforme che le mettono a disposizione in modo gratuito, almeno per la versione base.

In alternativa, si possono sempre utilizzare collegandosi sul sito ufficiale e andando a verificare le specifiche di utilizzo. Alcuni set di icone sono, però, a pagamento.