Gli sviluppatori Web sono molto abituati a utilizzare le icone per rappresentare un'azione specifica o l'icona può rappresentare graficamente qualsiasi comando o azione o un indicatore su una pagina web. Le icone vengono utilizzate nei documenti e nelle applicazioni e possono essere selezionabili o non selezionabili.
Ad esempio, le immagini che vediamo sui pulsanti di un'applicazione sono tutte icone e questi pulsanti possono essere selezionati.
Per facilitare la progettazione e la programmazione dei siti web, sono state sviluppate alcune librerie di icone di font, cioè icone che possono essere inserite come se fossero testo e sono disponibili per essere utilizzate nelle pagine HTML di un sito web, risparmiando molto lavoro per utenti, progettisti e programmatori.
In questo tutorial esamineremo alcune librerie come Font Awesome, Bootstrap Glyphicons e Material Design Google che sono librerie con caratteri icona preimpostati spesso utilizzati dagli sviluppatori web.
Font Awesome Strumenti e Libreria
Font Awesome è una libreria di font che rende le icone utilizzando un set di strumenti basati su CSS. Questo strumento è stato sviluppato per l'utilizzo con Twitter Bootstrap ma può essere utilizzato singolarmente come fogli di stile su qualsiasi sito web.
Il vantaggio di essere una libreria CSS è che funziona su qualsiasi browser e dispositivo e si adatta persino a qualsiasi risoluzione dello schermo.
Puoi scaricare la libreria dal sito Web Font Awesome. Un'altra opzione è utilizzare il collegamento diretto alla libreria:
Vediamo un esempio di come implementare le icone per i social network con Font Awesome, creiamo un file html e aggiungiamo il seguente codice:
Font Awesome - Icone Social Media
Ogni icona è rappresentata da un'icona di classe fa, quindi ad esempio l'icona per YouTube sarà fa-youtube, il risultato durante la visualizzazione nel browser sarà il seguente:
Quindi possiamo aggiungere le nostre classi CSS o modificare quella predefinita per adattarla al nostro design, ad esempio tra i tag head aggiungiamo il seguente codice CSS.
Decorazione di icone tramite CSS
Successivamente eseguiamo nel browser e il risultato sarà il seguente:
Possiamo vedere che abbiamo applicato CSS a ciascuna icona e non abbiamo aggiunto alcuna immagine. Un'altra opzione per migliorare la visibilità è cambiare il classe al passaggio del mouse, ovvero, quando il mouse passa sopra un'icona, cambia il colore della lettera.
Per fare ciò, cambiamo il colore nella riga seguente:
.social-icons .fa: hover {color: green; } Il risultato al passaggio del mouse su un'icona sarà il seguente:
Possiamo anche farlo con lo sfondo di ogni icona, cambiando la proprietà dello sfondo per un colore che ci piace.
Tutte le icone disponibili possono essere viste sul sito Web di Font Awesome, le icone sono organizzate per categorie.
L'utilizzo di questo tipo di carattere icona per i nostri progetti web ci consente di accelerare il caricamento della pagina poiché non abbiamo bisogno di immagini e offriamo una qualità superiore (soprattutto sui dispositivi mobili durante lo zoom)
Libreria e strumenti Bootstrap di Glyphicons
Glyphicons Bootstrap è una libreria di icone di font. Offre un'ampia varietà di icone in formato font. Queste icone sono gratuite e puoi anche estendere la libreria con icone a pagamento. Le icone gratuite possono essere utilizzate in progetti basati sul web design senza doverle acquistare. Questa libreria è orientata alle icone per i pulsanti che svolgono alcune funzioni come stampa, ricerca, salvataggio, ecc.
Questa libreria è inclusa come fogli di stile all'interno di Bootstrap, per utilizzarla possiamo scaricare Bootstrap dalla sua pagina ufficiale oppure utilizzare il seguente link:
Possiamo anche vedere le icone per categorie nella pagina Glyphicons.
Successivamente vediamo un esempio in cui usiamo questa libreria per le icone per i pulsanti e gli elementi di immissione dati per un modulo:
Glyphicon Bootstrap - BottoniAbbiamo testato su un dispositivo mobile come sarebbe:Glyphicon Bootstrap - Bottoni
Cerca Stampa Accedi Acquista
Applichiamo l'icona dell'elenco a una selezione
Auto Moto
I vantaggi dell'utilizzo delle icone dei caratteri o delle icone dei caratteri è che evita di dover richiamare un'immagine o un'icona poiché le immagini sono in formato svg nel file css della libreria e queste immagini sono scalabili.
Una libreria completa può essere compresa tra 10Kb e 40Kb, il che aumenta la velocità di caricamento del sito web.
Le icone sono di testo quindi possiamo manipolarle con CSS e risponderà a qualsiasi evento che programmiamo con Jquery.
Se nella proprietà CSS Font indichiamo una dimensione del carattere in em ad esempio font-size: 4em l'icona sarà responsive e si adatterà a qualsiasi dispositivo. Possono essere utilizzati anche per programmare applicazioni responsive con framework come visto nel tutorial, programmando applicazioni mobile con Ionic Framework, vengono utilizzate anche queste icone.
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
