Caratteri delle icone: pro e contro di Font Awesome

I caratteri delle icone vengono utilizzati per includere determinate icone standard nel contenuto del tuo sito web. Il Carattere 'Fantastico' è un esempio particolarmente valido di questi che offre molti vantaggi rispetto ad altri caratteri di icone. Originariamente progettato da Dave Gandy per uso con Bootstrap di Twitter, Font Awesome può essere utilizzato con WordPress utilizzando il Plug-in Font Awesome Icons progettato da Rachel Baker.

Ecco una breve introduzione a tali caratteri e dove il carattere Awesome si inserisce in uno stile che potrebbe essere ancora agli inizi.

Perché usare i caratteri delle icone?

Quando si progetta un sito Web, le immagini occupano molto spazio Web a causa delle dimensioni dei file. Devono anche essere richiamati nelle tue pagine web utilizzando il markup HTML. Non solo, ma il loro ridimensionamento è spesso un problema, perdendo definizione man mano che aumentano di dimensioni. Un'immagine normale si risolve come previsto solo se utilizzata nelle dimensioni originariamente progettate.

Quando cerchi immagini di icone standard, ad esempio per veicoli, determinati caratteri di punteggiatura o icone di grafici, i caratteri delle icone possono offrirti immagini scalabili che hanno lo stesso aspetto indipendentemente dalle dimensioni del carattere. Questo è proprio come le lettere e i numeri appaiono uguali indipendentemente dal fatto che tu usi una dimensione del carattere 2 o 5 o una dimensione del carattere di 10 o 24 punti.

In molti casi, le persone semplicemente non usano le immagini a causa di questo problema e il loro articolo o rapporto online ne risente nei dettagli o nella chiarezza. Usando Font Awesome, possono aggiungere icone di base ai loro siti e ridimensionarli alla dimensione richiesta, limitata solo dalle dimensioni dei loro documenti, e possono farlo senza perdere la definizione. Puoi guardare le icone scalabili allo stesso modo dei caratteri dei caratteri scalabili.

Ecco una selezione del lettore video e delle icone social disponibili:

E anche le nuove icone fornite con la versione 3.0:

Ognuno di questi può essere aumentato di dimensioni senza perdita di definizione. Puoi cambiare il loro colore e aggiungere facilmente ombre e cambiare la loro trasparenza. In effetti puoi fare qualsiasi cosa con loro che puoi con le immagini, e poi alcune, senza gli svantaggi della dimensione del file.

Questo è fondamentalmente ciò che possono fare i caratteri delle icone, e in particolare il carattere Awesome. Ecco alcune informazioni su come usarli e sfruttarli al meglio, e anche uno o due svantaggi associati ai fronti delle icone:

Utilizzo di Font Awesome

Con CSS Bootstrap normale:

Font Awesome può essere utilizzato con il CSS predefinito di Bootstrap copiando la directory dei font Awesome nel progetto e quindi copiando font-awesome.min.css nel progetto. Devi quindi aprire font-awesome.min.css e modificare i percorsi dei caratteri per assicurarti che puntino alla posizione Awesome.

Nella sezione Head del tuo HTML la posizione del font-awesome.min.css dovrebbe essere referenziata in questo modo:

Il percorso del carattere è relativo dalla tua directory CSS.

Con Bootstrap Meno:

Se stai utilizzando Twitter Bootstrap con LESS CSS, copia prima la directory dei font Font Awesome nel tuo progetto e poi font-awesome-less nella tua directory Bootstrap Less. Quindi:

• a) Apri bootstrap.less e sostituisci @import “sprites.less”; con @import “font-awesome.less”;
• b) Apri il font-awesome.less del tuo progetto e modifica la variabile @FontAwesomePath in modo che punti alla directory dei tuoi font.

@FontAwesomePath: "../font";

Il percorso del carattere è relativo dalla directory CSS compilata.

Quindi sei pronto, anche se se stai usando un compilatore statico dovresti ricompilare LESS.

Non usando Bootstrap:

Se non stai usando Bootstrap, dopo aver copiato il file del font nella directory del tuo progetto puoi copiare uno dei due fantastici file di font nel tuo progetto, aprirlo e quindi modificare la posizione del font in modo che punti alla directory dei font.

Se stai utilizzando Internet Explorer 7, usa font-awesome-ie7.min.css

Come usare Font Awesome in WordPress

Ci sono due semplici modi per utilizzare i caratteri delle icone in WordPress uno in cui hai caricato il plug-in*. Puoi incorporarli utilizzando HTML o utilizzare lo shortcode. Ecco alcuni esempi di ciascuno:

Utilizzo dell'HTML: Dove vuoi che appaia il carattere, aggiungi semplicemente il nome dell'elemento al nome della classe in questo modo: [html] [/html]
aggiungerà un cerchio nero.

Puoi modificare la dimensione del cerchio in questo modo:

Probabilmente troverai più facile aggiungere la dimensione del carattere al tuo foglio di stile CSS se intendi utilizzare frequentemente la stessa dimensione dell'icona e il formato sopra per le eccezioni.

Utilizzo dello shortcode: Lo shortcode è più semplice, ma generalmente funzionerà solo per i contenuti dei post e delle pagine nella schermata dell'editor dei post. Il formato è [icon name=icon-circle] dove vuoi il cerchio.

Il rovescio della medaglia dei caratteri delle icone

I caratteri delle icone sembrano ottimi da usare quando hai bisogno di aggiungere un'icona specifica al tuo blog o sito web e possono essere collegati per svolgere funzioni specifiche. Tuttavia, non tutto è perfetto e anche i caratteri delle icone presentano degli svantaggi. Questi sono i problemi comuni segnalati dagli utenti di caratteri icona che non si applicano a Font Awesome - ecco perché è così "Fantastico!"

1. Uno è il potenziale problema con gli screen reader che potrebbero leggere ad alta voce l'icona come una lettera alfabetica. Questo non è un problema con Font Awesome a causa del modo in cui vengono recuperati i caratteri dei caratteri.
2. Possono essere presentati in un solo colore o in un gradiente di colore utilizzando i gradienti CSS3. È un vero problema con i caratteri delle icone?
3. La creazione di un carattere personalizzato in base alle tue esigenze può richiedere tempo. Tuttavia, esiste già una vasta selezione di fantastici caratteri offerti da Font Awesome e l'elenco viene continuamente ampliato. Sebbene sia un font closed source gratuito, i font approvati progettati dagli utenti vengono aggiunti regolarmente.

Riepilogo generatore di caratteri fantastici

Il generatore di Font Awesome è uno dei migliori font di icone gratuiti attualmente disponibili. Sebbene sia stato progettato per l'uso con Twitter Bootstrap, può essere adattato per l'uso su normali siti Web ed è disponibile anche un plug-in WordPress che offre il meglio di questo carattere di icona. Se usi i caratteri delle icone, prova Font Awesome perché potresti essere piacevolmente sorpreso una volta che lo avrai padroneggiato.

* Il plugin Font Awesome Icons per WordPress è disponibile su https://github.com/rachelbaker/