Icone Web - Introduzione

Un'icona è un simbolo utilizzato per rappresentare un'azione o una capacità specifica 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 sono selezionabili. Allo stesso modo, quando usiamo un'icona come logo aziendale, normalmente non è selezionabile.

In ambiente Windows, se disattiviamo il volume di sistema, verrà rappresentato con l'aiuto di un'icona, come mostrato di seguito.

Utilizzando le icone web, possiamo rappresentare una pagina di caricamento, un'opzione disabilitata, un collegamento, un reindirizzamento, ecc. Queste icone possono essere capovolte, ruotate, ridimensionate, bordate, invertite e colorate.

Caratteri icona

I caratteri icona contengono simboli e glifi. Dopo aver caricato un carattere desiderato, è possibile utilizzare una qualsiasi delle icone fornite da quel carattere utilizzando il nome della classe dell'icona. Possiamo anche applicare colori diversi alle icone e ridimensionarle utilizzando le proprietà CSS. Sono disponibili diverse librerie di icone (caratteri) che forniscono icone. Questo tutorial si concentra su tre caratteri principali, vale a dire:

  • Carattere fantastico
  • Bootstrap Glyphicons
  • Icone dei materiali di Google

Carattere fantastico

Questo carattere fornisce 519 icone vettoriali scalabili gratuite. Questa libreria è completamente gratuita, sia per uso personale che commerciale. Queste icone possono essere personalizzate facilmente. In origine, sono stati sviluppati per Bootstrap.

Bootstrap Glyphicons

Si tratta di una libreria di icone monocromatiche disponibile nei formati di immagine raster, nei formati di immagine vettoriale e come caratteri. Fornisce oltre 250 glifi in formato font. Puoi usare questi caratteri nei tuoi progetti web. Queste icone non sono gratuite, tuttavia puoi usarle in progetti basati su Bootstrap senza doverle acquistare.

Icone dei materiali di Google

Google fornisce circa 750 icone progettate secondo le "linee guida progettate per i materiali" e queste sono note come Material Designicone. Queste icone sono semplici e supportano tutti i browser Web moderni. Poiché queste icone sono basate su vettori, sono anch'esse scalabili. Per utilizzare queste icone, dobbiamo caricare il carattere (libreria)material-icons.