Che cos'è un carattere icona? (E come usarne uno)

I caratteri icona sono una soluzione popolare a un problema CSS comune; come incorporare le icone web nella progettazione del tuo sito Web in modo efficiente e con caricamento rapido.

Con molti servizi disponibili per semplificare la scelta e l'utilizzo di un carattere icona, non è necessario crearne uno nuovo da zero. I caratteri icona sono su Internet.

Ma cos'è esattamente un font icona? E come li usi? Ecco una guida a tutto ciò che devi sapere sui caratteri icona.

Esplora caratteri

Che cos'è un carattere icona?

I caratteri icona sono caratteri tipografici che utilizzano immagini minuscole anziché forme letterali. Come il tipo, ogni personaggio è scalabile e può essere modificato tramite CSS.

I motivi principali per l'utilizzo di un carattere icona sono che puoi cambiare facilmente dimensione, colore, forma. I caratteri delle icone sono trasparenti per natura, quindi puoi metterli su qualsiasi colore o tipo di sfondo e puoi aggiungere tratti o modificare l'opacità delle icone.

È tutto fatto con i CSS, quindi non è necessario creare immagini uniche per ogni nuova istanza di un'icona nel design. (Questo è ottimo per mantenere il tuo sito Web e il tuo codice leggeri.)

I caratteri icona sono immagini vettoriali, nel senso che sono scalabili. Come con qualsiasi altro carattere, puoi renderli grandi o piccoli come preferisci. Usa i caratteri icona da soli come elementi artistici o persino sparsi in altri campi di testo.

La libreria di font icona più famosa e conosciuta è Font Awesome. È utilizzato per oltre 100 milioni di siti Web e include una solida raccolta di opzioni di icone. Funziona con tutti gli strumenti più diffusi, inclusi Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React ed Ember.

Ci sono anche alcuni altri set di icone di font abbastanza noti.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Pro e contro dell'utilizzo dei caratteri icona

Quindi perché dovresti usare - o evitare - un carattere icona? Ecco alcuni dei pro e contro di lavorare con questo stile di elemento artistico.

Pro dell'utilizzo dei caratteri icona

• Le icone sono facili da ridimensionare purché nel CSS siano presenti le classi appropriate
• Puoi ottenere grandi librerie di icone con pochi problemi
• La modifica delle proprietà dell'icona è semplice, indipendentemente da ciò che hai utilizzato per creare il tuo sito Web
• È facile aggiungere icone a qualsiasi pagina del sito Web (basta inserire il nome dell'icona)
• Ci sono migliaia di icone tra cui scegliere in tutti i tipi di stili
• Gli utenti di WordPress possono aggiungere caratteri icona con un semplice plug-in o copiando la directory dei caratteri nel codice (quasi qualsiasi interfaccia)
• Puoi creare il tuo carattere icona se hai bisogno di qualcosa di super personalizzato

Contro dell'utilizzo dei caratteri icona

• Le icone sono un singolo colore o sfumatura di colore (nella maggior parte dei casi); alcuni altri pacchetti premium stanno cambiando questo
• Nessun buon fallback se il carattere dell'icona non viene caricato
• Potrebbe non essere necessario un set di icone completo
• Alcuni screen reader non sanno cosa fare con i caratteri icona
• Potresti non trovare un pacchetto adatto alle tue esigenze

Come utilizzare i caratteri icona

Mentre le istruzioni per l'uso dei caratteri icona possono variare leggermente a seconda del provider scelto, l'idea di base è la stessa.

In genere, hai tre opzioni (a meno che tu non preveda di fare un po 'più di hard-coding da solo):

• Utilizza un plug-in che installa tutto in modo da chiamare solo le icone che desideri utilizzare. (Super facile!)
• Usa le icone dei caratteri integrate dal tuo CMS o dal costruttore del sito web. Funziona alla grande se non hai un sito personalizzato o hai bisogno / desideri un tipo specifico di icona del font. La maggior parte dei costruttori di siti Web viene fornito con qualcosa di "pronto all'uso".
• Collegamento manuale a un carattere icona ospitato esternamente. (La versione più complicata dell'uso di un plugin.)

Caratteri icona vs. SVG

Il dibattito più ampio si sta spostando sull'opportunità o meno di utilizzare un carattere icona rispetto alle immagini SVG allo scopo di inserire piccole immagini sul tuo sito Web. Entrambe le opzioni sono ugualmente praticabili e hanno molto a che fare con le preferenze personali.

I caratteri icona sono generalmente più facili da trovare e utilizzare per la maggior parte delle persone. Le icone SVG sono preferite dagli utenti che necessitano di un maggiore controllo del design.

Un file SVG (formato vettoriale scalabile) può darti un po 'più di flessibilità nel design. (Non sei limitato a un solo colore). I file piccoli e scalabili possono essere caricati direttamente nella tua directory multimediale e sono facili da lavorare. Questa è una buona opzione se hai solo bisogno di una manciata di icone e non vuoi occuparti di una biblioteca.

Gli SVG sono più flessibili con la possibilità di aggiungere più colori e animazioni.

I font delle icone potrebbero essere più veloci nel caricamento a lungo termine perché sono memorizzati nella cache. Ma la differenza può essere piuttosto minima.

I caratteri delle icone di posizionamento possono diventare un po 'complicati poiché sono soggetti alle regole tipiche dei caratteri come dimensioni, interlinea e allineamenti verticali. Questo da solo è il motivo per cui la maggior parte delle persone che usano un font icona, optano per un provider affermato piuttosto che provare a crearne uno proprio.

Gli SVG possono includere elementi che li rendono più accessibili rispetto ai caratteri icona, che possono apparire come caratteri lettera per i lettori di schermo.

I caratteri icona sono generalmente più facili da trovare e utilizzare per la maggior parte delle persone. Le biblioteche sono generalmente disponibili e non sono difficili da capire. Le icone SVG sono preferite dagli utenti che desiderano un maggiore controllo del design e opzioni di personalizzazione.

Entrambe le opzioni sono comunemente usate e funzionano bene nella maggior parte dei casi. Scegline uno ha molto a che fare con ciò con cui ti senti più a tuo agio e con ciò che corrisponde all'estetica del tuo design e all'interfaccia utente.

Conclusione

Uno dei motivi per cui i caratteri icona sono così popolari è che sono versatili e facili da usare. Grazie a un formato scalabile che può essere installato con un paio di clic sulla maggior parte dei sistemi di gestione dei contenuti, quasi tutti possono iniziare a utilizzare rapidamente i caratteri delle icone.

Il vero vantaggio di un carattere icona è che l'elemento utilizza CSS e non è un file immagine indipendente. Questo è utile per creare un sito Web snello con elementi che si caricano rapidamente e in un formato vettoriale (ottimo se è necessario modificare le dimensioni in un secondo momento).