All’inizio le icone erano facilmente disponibili, ma implementarle in modo efficiente in WordPress era un po’ complicato. Si potevano aggirare alcuni problemi con gli sprite, ma non erano sempre una buona soluzione, e quando sono usciti gli schermi retina, il problema si è ingigantito (letteralmente).
Una delle soluzioni più comuni a questo problema è l’utilizzo di un font icon. Le icone sono font web o vettoriali, quindi è possibile scalarle all’infinito e molte icone possono stare all’interno di un singolo file, riducendo notevolmente il numero di richieste. Questo permette di utilizzare quasi tutte le icone che si possono immaginare. Tuttavia, bisogna fare anche alcune considerazioni sulle prestazioni.
In questo articolo vi mostreremo un paio di soluzioni per utilizzare gli icon font di WordPress, dove ottenerli e il modo migliore di utilizzarle sul vostro sito.
- Dove Trovare gli Icon Font
- Soluzioni Rapide e Semplici per Utilizzare gli Icon Font
- Problemi di Performance da Tenere in Considerazione con gli Icon Font
- Ospitare gli icon Font in Locale (Solo Quelli che Servono)
- Problemi di Accessibilità degli Icon Font
Dove Trovare gli Icon Font
Ci sono un sacco di posti dove trovare gli icon font per il vostro sito WordPress. Basta digitare “icon font” in Google per ottenere ottimi risultati. Uno dei più popolari e utilizzati è Font Awesome. Al momento in cui scriviamo, ha più di 1.400 icone gratuite e più di 4.500 icone nella versione pro. Include icone per quasi tutto, dall’interfaccia, ai social, alle frecce e molti altri tipi di icone.
Qui ce ne sono alcuni altri cui dare un’occhiata:
- IcoMoon è un altro servizio popolare con oltre 5.500 icone vettoriali gratuite e oltre 4.000 icone premium. Di seguito useremo il loro generatore di icon font.
- Fontello è un altro ottimo servizio che aiuta a scoprire e costruire icon font.
- Se state cercando un set di icone super leggere, date un’occhiata a Bytesize. Tutte le 84 icone arrivano a 9KB minificate (2 KB in SVGZ o Gzip).
- Se volete semplicemente usare le icone SVG manualmente, non troverete una libreria gratuita migliore di Iconmonstr o una libreria premium migliore di Iconfinder.
Soluzioni Rapide e Semplici per Utilizzare gli Icon Font di WordPress
Per prima cosa andremo alla scoperta di alcuni dei modi più semplici e veloci per utilizzare gli icon font di WordPress. Vi avverto, non tutti questi sono i migliori in termini di prestazioni. Per le prestazioni, consigliamo di saltare alla sezione sul metodo migliore.
Opzione 1 – Utilizzare un Plugin WordPress
Il modo più veloce per mettersi in azione con gli icon font di WordPress è quello di utilizzare semplicemente un plugin di terze parti. Il plugin gratuito Font Awesome Integration contiene l’ultima libreria di icone Font Awesome 5. Dopo averla installata e attivata, basta un semplice shortcode per inserire un’icona. Ora c’è anche un’icona di WordPress! Figo.
È possibile consultare la tabella di utilizzo di base di Font Awesome 5 per scoprire quali sono i modi per usarlo e personalizzarlo, oltre a visualizzare la libreria di icone. Ad esempio, qui sotto abbiamo inserito l’icona di WordPress di Font Awesome in un blocco shortcode di Gutenberg e abbiamo aggiunto fa-3x per renderlo tre volte più grande.
[fawesome iclass="fab fa-wordpress fa-3x"]
Ecco come appare sul front-end. Facile, vero? Abbiamo inserito un’icona di Font Awesome sul nostro sito in pochi minuti.
Se volete un sacco di shortcode facili da usare, date anche un’occhiata al plugin Shortcodes Ultimate. C’è anche un add-on di icone premium.
È un’ottima soluzione se volete che i vostri clienti aggiungano icone ai post o alle pagine, ma se volete usare questi elementi all’interno del vostro tema o di un plugin è meglio se li mettete in evidenza voi stessi (approfondiremo la questione più avanti).
Opzione 2 – Utilizzare le Dashicons Native
Dashicons è un set di icone incluse di default, dato che WordPress lo utilizza nel backend. Sarà necessario inserirlo nel front-end, ma tutto ciò che serve è il nome dello script, il file è già disponibile per WordPress.
Potete aggiungere quanto segue al vostro file functions.php, oppure utilizzare un plugin gratuito come Code Snippets. Questo riduce al minimo il rischio di rompere il tema e in più le modifiche rimarranno anche aggiornando il tema.
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}Potete quindi andare sul sito web di Dashicons, selezionare un’icona e cliccare sul link “copia HTML”. Questo vi darà il codice necessario per visualizzare l’icona. Non c’è una selezione enorme, ma funzionano comunque benissimo e sono molto leggere.
<span class="dashicons dashicons-admin-post"></span>Ad esempio, qui sotto abbiamo inserito l’icona della dashboard in un blocco HTML di Gutenberg.
Ecco come appare sul front-end.
Dashicons non ha shortcode, ma è possibile personalizzare le dimensioni delle icone con i CSS. Ecco un esempio di inserimento di un’icona subito prima di un’intestazione.
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>Opzione 3 – Collegare Manualmente gli Icon Font Ospitati Esternamente
La terza opzione è quella di collegarsi manualmente agli icon font ospitati esternamente. Questo è essenzialmente ciò che il plugin dell’opzione 1 di cui sopra fa dietro le quinte.
Per Font Awesome, potete prendere il codice dalla loro pagina iniziale e poi seguire la procedura. Ospitano tutti i loro font su un CDN gratuitamente. Il codice sarà simile a questo:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">Passo 1
Copiate il codice nella sezione <head> di ogni template o pagina del vostro sito WordPress dove volete usare Font Awesome. Potete modificare il file header.php del vostro tema o meglio ancora, seguire il nostro semplice tutorial su come aggiungere codice all’header.
Passo 2
Potete quindi iniziare a posizionare le icone nel <body> del codice HTML. Trovate l’icona giusta e imparate come aggiungerla alla vostra pagina.
Problemi di Performance da Tenere in Considerazione con gli Icon Font
Anche se non c’è nulla di sbagliato nell’utilizzare uno dei modi sopra citati per aggiungere gli icon font al vostro sito, non sono tecnicamente il modo migliore. Perché? Tutto si riduce a problemi di performance.
Probabilmente Non Avete Bisogno di Tutte Quelle Icone
Prima di tutto, quando si usa un plugin per gli icon font o un link ad una libreria esterna, si caricheranno tutte le icone dell’intera libreria. Se si utilizzano solo una ventina di icone in tutto il sito, questo può essere gestito in modo molto più efficiente.
Per esempio, abbiamo incluso la libreria di Font Awesome 5 sul nostro sito e, anche se il file CSS è piccolo, il file dei font è di 108 KB. Anche se questo potrebbe non sembrare così grande, vedrete più avanti quanto piccolo diventi il file quando scegliamo solo i font HTML che utilizziamo effettivamente.
Il Caricamento da un Solo CDN è Solitamente più Veloce
In secondo luogo, non c’è niente di sbagliato nel caricare script da diversi CDN. Tuttavia, se si ha la possibilità, di solito è più veloce caricarli da un solo CDN. Perché? Perché può sfruttare una singola connessione HTTP/2 e riduce le ricerche DNS aggiuntive. Assicuratevi solo che il vostro CDN principale sia buono!
Ospitare gli Icon Font in Locale (Solo Quelli che Servono)
Per le ragioni di performance sopra menzionate, spiegheremo ora come ospitare i vostri icon in locale, oltre a utilizzare solo quelli necessari. Con locale intendiamo sia caricarli dal server del vostro host WordPress sia dal vostro CDN.
Scegliendo solo gli icon font necessari, si può ridurre la dimensione del file da 100 KB a un paio di kilobyte. Piuttosto pratico! Ancora meglio: si possono anche mescolare e abbinare le icone di vari set di caratteri.
Le Basi – Come Funziona
Utilizzare un icon font comporta l’hosting del file del font (WOFF, WOFF 2, ecc.) sul server web, quindi di CSS per caricare il font face, quindi la creazione del markup per aggiungere le icone nel posto corretto.
Mentre il vostro sito caricherà un singolo file, finirete per avere un certo numero di formati di file per ogni carattere, poiché alcuni browser utilizzano formati diversi. Font Awesome ha 6 diversi formati di file: EOT, SVG, TTF, TTF, WOFF, WOFF 2 e OTF. Tuttavia, in base al supporto del browser è necessario solo WOFF o WOFF 2.
Suggerimento: WOFF è supportato da oltre il 93% di tutti i browser moderni. Tuttavia, WOFF 2 è più compresso, ma è supportato solo dall’83% dei browser moderni. Consigliamo di scegliere l’uno o l’altro o entrambi. Il browser determinerà in base al vostro codice quale consegnare al cliente.
Il vostro primo compito è quello di utilizzare uno strumento per scegliere solo le icone che volete. Potrete quindi aggiungere questi file alla directory del progetto da qualche parte, normalmente in una directory di font.
Successivamente, aggiungete il file CSS di Font Awesome nel vostro progetto e aggiungetelo al vostro sito web utilizzando un normale link.
<link rel="stylesheet" href="css/font-awesome.min.css">Potreste anche accodare il file CSS o, se è piccolo, semplicemente usarlo in linea.
Se si guarda il file CSS, si può vedere cosa succede in background. Vengono caricati i file dei font, viene definito l’elemento base con la classe di .fa (insieme ad alcune altre classi) e, infine, viene definita ogni icona con un nome (es.: .fa-book).
L’unica cosa a cui bisogna prestare attenzione è il percorso dei file dei font. Di default, vengono caricati da ../fonts, che sarà la directory dei font, una cartella sopra rispetto al file CSS corrente. Potrebbe essere necessario modificarlo per adattarlo alla vostra struttura di directory.
Ora che avete un’idea di come funziona, possiamo passare al come fare. In questo esempio, utilizziamo un sito di ecommerce di produzione.
Passo 1
In primo luogo, si dovrebbe stabilire quale libreria di font icon utilizzare. All’inizio di questo articolo, ne abbiamo condivise alcune che ci piacciono. In questo esempio, useremo Font Awesome insieme al generatore di font IcoMoon. Se volete i file WOFF 2 di IcoMoon, dovrete pagare una commissione una tantum di $9.00 per accedere alla libreria premium.
Potete scaricare gratuitamente le icone di Font Awesome che desiderate manualmente, ma sarebbe necessario utilizzare uno strumento come FontForge per modificare manualmente i file WOFF o WOFF 2. Manteniamo le cose semplici, quindi usiamo un generatore.
Passo 2
Dirigetevi verso il generatore di IcoMoon. Fate clic su “Aggiungi” sulla libreria Font Awesome.
Passo 3
In seguito, dovrete scegliere le icone che desiderate utilizzare sul vostro sito WordPress. Se state già utilizzando Font Awesome e state semplicemente passando alle versioni ospitate in locale, fate un breve elenco e poi sceglietele dalla biblioteca.
In questo esempio, scegliamo le icone per perfmatters.io, un sito di ecommerce WordPress con Easy Digital Downloads.
Passo 4
Una volta scelte tutte le icone, scegliete “Generate Font” in basso. Per questo sito, abbiamo scelto 20 icone.
Avrete dei file che assomigliano a questo. Quelli importanti di cui avrete bisogno sono il file style.css e i file dei font (WOFF, WOFF 2).
Passo 5
Successivamente, è consigliabile effettuare una ricerca e sostituzione nel file style.css prima di caricarlo o copiarlo sul vostro sito. Ecco come appare l’originale.
Per chi già usa Font Awesome, questo rende semplicemente più facile cambiare le classi in Font Awesome. In questo modo, se c’era qualcosa già codificato sul vostro sito WordPress, inizierà automaticamente ad usare le icone.
Quindi fate un Cerca per “icon” e sostituite tutte le occorrenze con “fa”. Dovreste essere in grado di fare una rapida ricerca e sostituzione con un editor di testo come Sublime.
Questo sostituisce [class^="icon-"], [class*=" icon-"] con [class^="fa-"], [class*=" fa-"]. Inoltre corregge ogni icona, così, invece di iniziare con .icon-, ora iniziano con .fa-.
Potrebbe anche essere necessario modificare l’URL di origine in base a dove si caricano i file dei font al punto 7. Si consiglia di cambiare l’URL al vostro CDN.
Passo 6
Poi sarà necessario aggiungere i CSS al vostro sito. Ci sono un paio di modi per farlo.
Opzione 1
Dato che la quantità di CSS è molto piccola, è possibile copiare tutti i CSS del file e incollarli nel Customizer di WordPress. Non fatelo mai per i file di grandi dimensioni. In questo caso si tratta di una quantità relativamente piccola di CSS. Questo significa che verrà caricato in linea sul vostro sito.
Opzione 2
Potete collegarvi manualmente al vostro foglio di stile inserendolo nell’header del vostro sito WordPress. Suggerimento: Collegatevi al foglio di stile sul vostro CDN per ottenere prestazioni migliori.
<link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/style.css">Opzione 3
Potreste anche pubblicare il file CSS in WordPress. L’operazione è molto simile a quella manuale. Aggiungete quanto segue al file functions.php del vostro tema, oppure utilizzate il plugin gratuito Code Snippets. Potrebbe essere necessario cambiare la directory in base a dove lo si carica.
function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );Passo 7
Ora che avete aggiunto i CSS al vostro sito, è il momento di caricare i file dei font. Potete mettere i font ovunque, ma una cartella chiamata “font” direttamente nella cartella /pubblic andrà bene. Ricordate però che la cartella sorgente nel vostro file style.css deve corrispondere.
Passo 8
Ora il vostro sito WordPress dovrebbe avere sia i vostri CSS che i file di font accessibili. Quindi, in seguito, potete aggiungere un po’ di markup al vostro sito. Questo è solo un esempio di un’icona a forma di ingranaggio.
<i class="fa fa-cog"></i>Potete vedere un esempio dal vivo di questo lavoro su perfmatters.io. Tenete a mente che potete usare qualsiasi elemento, non solo i. Potete usare anche elementi span regolari, oltre ad aggiungere CSS alle vostre classi personalizzate.
La vera differenza sono le dimensioni. Ricordate, quando ci siamo collegati alla libreria esterna di Font Awesome, la dimensione totale del file dei font era di 108 KB. Dopo aver usato un generatore di font e scelto solo le icone di Font Awesome di cui avevamo bisogno per il sito, il file dei font è sceso a 2,6 KB. Il file dei font è diminuito di un enorme 97,59%!
Non solo, ma ora si carica anche dal nostro CDN, il che significa che non ci sono ulteriori ricerche DNSsu fontawesome.com.
È possibile utilizzare questo stesso approccio anche con le icone SVG, è solo leggermente diverso.
Problemi di Accessibilità degli Icon Font
Un aspetto negativo dei icon font è la loro orribile accessibilità. I lettori di schermo possono saltarli, o peggio ancora, leggere l’unicode o il carattere stesso. In questo modo le persone ipovedenti potrebbero sentire “yellow star favourites” quando guardano la voce del menu dei preferiti. Non è l’ideale. Dovreste anche tener conto di cosa succede se i caratteri non vengono caricati.
In teoria, si dovrebbe fare in modo che le icone decorative semplicemente scompaiano quando non sono caricate e che le icone critiche siano sostituite da un testo se c’è un problema.
Il problema dell’accessibilità è abbastanza facile da risolvere, basta usare il parametro aria-hidden="true" per indicare ai lettori di schermo che devono scartare il nostro elemento.
<span class="icon icon-star" aria-hidden="true"></span> My FavouritesIn un’implementazione più completa, è anche possibile utilizzare Modernizr per testare il supporto di font face. Sarà necessario modificare leggermente il CSS. Si legga l’eccellente articolo Bulletproof Font Icons per informazioni più approfondite.
Per saperne di più sulla creazione di icone critiche con testo di fallback, si consiglia anche di leggere l’articolo di cui sopra, dove si spiega come risolvere il problema nel miglior modo possibile, ma la sua implementazione è un po’ fuori dallo scopo di questo articolo.
Riepilogo
Questo è tutto quello che c’è da sapere sugli icon font. Ora conoscete i diversi modi per aggiungere facilmente gli icon font al vostro sito WordPress, con il modo migliore per implementarle per ottenere le migliori prestazioni.
Consigliamo sempre di utilizzare un generatore di font per costruire un icon font che consiste solo delle icone che servono. Questo renderà il vostro tema molto più snello! Se avete una libreria o un generatore preferito che non abbiamo menzionato, fatecelo sapere. Ce ne sono un discreto numero di buon livello! Inoltre, non perdetevi la nostra guida approfondita sui font di WordPress.
Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.
Lascia un commento