Dove Trovare gli Icon Font<\/h2>\n
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\u00f9 popolari e utilizzati \u00e8 Font Awesome<\/a>. Al momento in cui scriviamo, ha pi\u00f9 di 1.400 icone gratuite e pi\u00f9 di 4.500 icone nella versione pro. Include icone per quasi tutto, dall’interfaccia, ai social, alle frecce e molti altri tipi di icone.<\/p>\n Qui ce ne sono alcuni altri cui dare un’occhiata:<\/p>\n Per prima cosa andremo alla scoperta di alcuni dei modi pi\u00f9 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<\/a>.<\/p>\n Il modo pi\u00f9 veloce per mettersi in azione con gli icon font di WordPress \u00e8 quello di utilizzare semplicemente un plugin di terze parti. Il plugin gratuito Font Awesome Integration<\/a> contiene l’ultima libreria di icone Font Awesome 5. Dopo averla installata e attivata, basta un semplice shortcode per inserire un’icona. Ora c’\u00e8 anche un’icona di WordPress! Figo.<\/p>\n \u00c8 possibile consultare la tabella di utilizzo di base<\/a> 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<\/a> e abbiamo aggiunto Ecco come appare sul front-end. Facile, vero? Abbiamo inserito un’icona di Font Awesome sul nostro sito in pochi minuti.<\/p>\n Se volete un sacco di shortcode facili da usare, date anche un’occhiata al plugin Shortcodes Ultimate<\/a>. C’\u00e8 anche un add-on di icone premium.<\/p>\n \u00c8 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 \u00e8 meglio se li mettete in evidenza voi stessi (approfondiremo la questione pi\u00f9 avanti).<\/p>\n Dashicons<\/a> \u00e8 un set di icone incluse di default, dato che WordPress lo utilizza nel backend. Sar\u00e0 necessario inserirlo nel front-end, ma tutto ci\u00f2 che serve \u00e8 il nome dello script, il file \u00e8 gi\u00e0 disponibile per WordPress.<\/p>\n Potete aggiungere quanto segue al vostro file Potete quindi andare sul sito web di Dashicons<\/a>, selezionare un’icona e cliccare sul link “copia HTML”. Questo vi dar\u00e0 il codice necessario per visualizzare l’icona. Non c’\u00e8 una selezione enorme, ma funzionano comunque benissimo e sono molto leggere.<\/p>\n Ad esempio, qui sotto abbiamo inserito l’icona della dashboard in un blocco HTML di Gutenberg<\/a>.<\/p>\n Ecco come appare sul front-end.<\/p>\n Dashicons non ha shortcode, ma \u00e8 possibile personalizzare le dimensioni delle icone con i CSS<\/a>. Ecco un esempio di inserimento di un’icona subito prima di un’intestazione.<\/p>\n La terza opzione \u00e8 quella di collegarsi manualmente agli icon font ospitati esternamente. Questo \u00e8 essenzialmente ci\u00f2 che il plugin dell’opzione 1 di cui sopra fa dietro le quinte.<\/p>\n Per Font Awesome, potete prendere il codice dalla loro pagina iniziale<\/a> e poi seguire la procedura. Ospitano tutti i loro font su un CDN<\/a> gratuitamente. Il codice sar\u00e0 simile a questo:<\/p>\n Passo 1<\/strong><\/p>\n Copiate il codice nella sezione Passo 2<\/strong><\/p>\n Potete quindi iniziare a posizionare le icone nel Anche se non c’\u00e8 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\u00e9? Tutto si riduce a problemi di performance<\/strong>.<\/p>\n 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\u00f2 essere gestito in modo molto pi\u00f9 efficiente.<\/p>\n\n Per esempio, abbiamo incluso la libreria di Font Awesome 5 sul nostro sito e, anche se il file CSS \u00e8 piccolo, il file dei font \u00e8 di 108 KB. Anche se questo potrebbe non sembrare cos\u00ec grande, vedrete pi\u00f9 avanti quanto piccolo diventi il file quando scegliamo solo i font HTML<\/a> che utilizziamo effettivamente.<\/p>\n In secondo luogo, non c’\u00e8 niente di sbagliato nel caricare script da diversi CDN. Tuttavia, se si ha la possibilit\u00e0, di solito \u00e8 pi\u00f9 veloce caricarli da un solo CDN. Perch\u00e9? Perch\u00e9 pu\u00f2 sfruttare una singola connessione HTTP\/2<\/a> e riduce le ricerche DNS<\/a> aggiuntive. Assicuratevi solo che il vostro CDN principale sia buono!<\/p>\n 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.<\/p>\n Scegliendo solo gli icon font necessari, si pu\u00f2 ridurre la dimensione del file da 100 KB a un paio di kilobyte<\/strong>. Piuttosto pratico! Ancora meglio: si possono anche mescolare e abbinare le icone di vari set di caratteri.<\/p>\n Utilizzare un icon font comporta l’hosting del file del font (WOFF, WOFF 2, ecc.) sul server web, quindi di CSS<\/a> per caricare il font face, quindi la creazione del markup per aggiungere le icone nel posto corretto.<\/p>\n Mentre il vostro sito caricher\u00e0 un singolo file, finirete per avere un certo numero di formati di file per ogni carattere, poich\u00e9 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 \u00e8 necessario solo WOFF o WOFF 2.<\/p>\n Suggerimento: WOFF \u00e8 supportato<\/a> da oltre il 93% di tutti i browser moderni. Tuttavia, WOFF 2 \u00e8 pi\u00f9 compresso, ma \u00e8 supportato<\/a> solo dall’83% dei browser moderni. Consigliamo di scegliere l’uno o l’altro o entrambi. Il browser determiner\u00e0 in base al vostro codice quale consegnare al cliente.<\/p>\n Il vostro primo compito \u00e8 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.<\/p>\n Successivamente, aggiungete il file CSS di Font Awesome nel vostro progetto e aggiungetelo al vostro sito web utilizzando un normale link.<\/p>\n Potreste anche accodare il file CSS o, se \u00e8 piccolo, semplicemente usarlo in linea.<\/p>\n Se si guarda il file CSS, si pu\u00f2 vedere cosa succede in background. Vengono caricati i file dei font, viene definito l’elemento base con la classe di L’unica cosa a cui bisogna prestare attenzione \u00e8 il percorso dei file dei font. Di default, vengono caricati da Ora che avete un’idea di come funziona, possiamo passare al come fare. In questo esempio, utilizziamo un sito di ecommerce di produzione.<\/p>\n 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<\/a>. Se volete i file WOFF 2 di IcoMoon, dovrete pagare una commissione una tantum di $9.00 per accedere alla libreria premium.<\/p>\n Potete scaricare gratuitamente le icone di Font Awesome che desiderate manualmente, ma sarebbe necessario utilizzare uno strumento come FontForge<\/a> per modificare manualmente i file WOFF o WOFF 2. Manteniamo le cose semplici, quindi usiamo un generatore.<\/p>\n Dirigetevi verso il generatore di IcoMoon<\/a>. Fate clic su “Aggiungi” sulla libreria Font Awesome.<\/p>\n In seguito, dovrete scegliere le icone che desiderate utilizzare sul vostro sito WordPress. Se state gi\u00e0 utilizzando Font Awesome e state semplicemente passando alle versioni ospitate in locale, fate un breve elenco e poi sceglietele dalla biblioteca.<\/p>\n In questo esempio, scegliamo le icone per perfmatters.io<\/a>, un sito di ecommerce WordPress con Easy Digital Downloads.<\/p>\n Una volta scelte tutte le icone, scegliete “Generate Font” in basso. Per questo sito, abbiamo scelto 20 icone.<\/p>\n Avrete dei file che assomigliano a questo. Quelli importanti di cui avrete bisogno sono il file Successivamente, \u00e8 consigliabile effettuare una ricerca e sostituzione nel file Per chi gi\u00e0 usa Font Awesome, questo rende semplicemente pi\u00f9 facile cambiare le classi in Font Awesome. In questo modo, se c’era qualcosa gi\u00e0 codificato sul vostro sito WordPress, inizier\u00e0 automaticamente ad usare le icone.<\/p>\n 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<\/a>.<\/p>\n Questo sostituisce 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.<\/strong><\/p>\n Poi sar\u00e0 necessario aggiungere i CSS al vostro sito. Ci sono un paio di modi per farlo.<\/p>\n Opzione 1<\/strong><\/p>\n Dato che la quantit\u00e0 di CSS \u00e8 molto piccola, \u00e8 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\u00e0 relativamente piccola di CSS. Questo significa che verr\u00e0 caricato in linea sul vostro sito.<\/p>\n Opzione 2<\/strong><\/p>\n 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.<\/p>\n Opzione 3<\/strong><\/p>\n Potreste anche pubblicare il file CSS in WordPress. L’operazione \u00e8 molto simile a quella manuale. Aggiungete quanto segue al file Ora che avete aggiunto i CSS al vostro sito, \u00e8 il momento di caricare i file dei font. Potete mettere i font ovunque, ma una cartella chiamata “font” direttamente nella cartella \/pubblic andr\u00e0 bene. Ricordate per\u00f2 che la cartella sorgente nel vostro file 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 \u00e8 solo un esempio di un’icona a forma di ingranaggio.<\/p>\n Potete vedere un esempio dal vivo di questo lavoro su perfmatters.io<\/a>. Tenete a mente che potete usare qualsiasi elemento, non solo 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 \u00e8 sceso a 2,6 KB. Il file dei font \u00e8 diminuito di un enorme 97,59%!<\/strong><\/p>\n Non solo, ma ora si carica anche dal nostro CDN, il che significa che non ci sono ulteriori ricerche DNS<\/strong>su fontawesome.com.<\/p>\n\n \u00c8 possibile utilizzare questo stesso approccio anche con le icone SVG, \u00e8 solo leggermente diverso.<\/p>\n Un aspetto negativo dei icon font \u00e8 la loro orribile accessibilit\u00e0<\/a>. 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 \u00e8 l’ideale. Dovreste anche tener conto di cosa succede se i caratteri non vengono caricati.<\/p>\n 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’\u00e8 un problema.<\/p>\n Il problema dell’accessibilit\u00e0 \u00e8 abbastanza facile da risolvere, basta usare il parametro In un’implementazione pi\u00f9 completa, \u00e8 anche possibile utilizzare Modernizr per testare il supporto di font face. Sar\u00e0 necessario modificare leggermente il CSS. Si legga l’eccellente articolo Bulletproof Font Icons<\/a> per informazioni pi\u00f9 approfondite.<\/p>\n Per saperne di pi\u00f9 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 \u00e8 un po’ fuori dallo scopo di questo articolo.<\/p>\n Questo \u00e8 tutto quello che c’\u00e8 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.<\/p>\n![\"Le](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/font-icone-impressionanti.png\")
\n
Soluzioni Rapide e Semplici per Utilizzare gli Icon Font di WordPress<\/h2>\n
Opzione 1 – Utilizzare un Plugin WordPress<\/h3>\n
fa-3x<\/code> per renderlo tre volte pi\u00f9 grande.<\/p>\n[fawesome iclass=\"fab fa-wordpress fa-3x\"]<\/code><\/pre>\n![\"Shortcode](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/gutenberg-font-awesome-shortcode.png\")
![\"Esempio](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/font-awesome-wordpress-5.0-1.png\")
Opzione 2 – Utilizzare le Dashicons Native<\/h3>\n
functions.php<\/code>, oppure utilizzare un plugin gratuito come Code Snippets<\/a>. Questo riduce al minimo il rischio di rompere il tema e in pi\u00f9 le modifiche rimarranno anche aggiornando il tema.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'dashicons' );\n}<\/code><\/pre>\n<span class=\"dashicons dashicons-admin-post\"><\/span><\/code><\/pre>\n![\"Dashicons](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/dashicons-gutenberg.png\")
![\"Esempio](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/esempio-dashicons-wordpress-5-0.png\")
<h2 class=\"dashicons-before dashicons-smiley\">My Cool Headline<\/h2><\/code><\/pre>\nOpzione 3 – Collegare Manualmente gli Icon Font Ospitati Esternamente<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.5.0\/css\/all.css\" integrity=\"sha384-xxxxx\" crossorigin=\"anonymous\"><\/code><\/pre>\n<head><\/code> di ogni template o pagina del vostro sito WordPress dove volete usare Font Awesome. Potete modificare il file header.php<\/code> del vostro tema o meglio ancora, seguire il nostro semplice tutorial su come aggiungere codice all’header<\/a>.<\/p>\n<body><\/code> del codice HTML. Trovate l’icona giusta<\/a> e imparate come aggiungerla alla vostra pagina<\/a>.<\/p>\nProblemi di Performance da Tenere in Considerazione con gli Icon Font<\/h2>\n
Probabilmente Non Avete Bisogno di Tutte Quelle Icone<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/grande-libreria-caratteri-grandi.png\")
Il Caricamento da un Solo CDN \u00e8 Solitamente pi\u00f9 Veloce<\/h3>\n
Ospitare gli Icon Font in Locale (Solo Quelli che Servono)<\/h2>\n
Le Basi – Come Funziona<\/h3>\n
<link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\"><\/code><\/pre>\n.fa<\/code> (insieme ad alcune altre classi) e, infine, viene definita ogni icona con un nome (es.: .fa-book).<\/p>\n..\/fonts<\/code>, che sar\u00e0 la directory dei font, una cartella sopra rispetto al file CSS corrente. Potrebbe essere necessario modificarlo per adattarlo alla vostra struttura di directory.<\/p>\nPasso 1<\/h3>\n
Passo 2<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/icomoon-font-awesome-library.png\")
Passo 3<\/h3>\n
![\"Scegliere](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/scegliere-icone-font-awesome-1.png\")
Passo 4<\/h3>\n
![\"Icone](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/icone-font-awesome-icomoon-export.png\")
style.css<\/code> e i file dei font (WOFF, WOFF 2).<\/p>\n![\"File](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/file-font-delle-icone.png\")
Passo 5<\/h3>\n
style.css<\/code> prima di caricarlo o copiarlo sul vostro sito. Ecco come appare l’originale.<\/p>\n![\"File](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/file-css-icomoon.png\")
![\"Cerca](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/trova-sostituisci-sublime.png\")
[class^=\"icon-\"], [class*=\" icon-\"]<\/code> con [class^=\"fa-\"], [class*=\" fa-\"]<\/code>. Inoltre corregge ogni icona, cos\u00ec, invece di iniziare con .icon-<\/code>, ora iniziano con .fa-<\/code>.<\/p>\nPasso 6<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.yourdomain.com\/fonts\/style.css\"><\/code><\/pre>\nfunctions.php<\/code> del vostro tema, oppure utilizzate il plugin gratuito Code Snippets<\/a>. Potrebbe essere necessario cambiare la directory in base a dove lo si carica.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '\/css\/style.css' );\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_styles' );<\/code><\/pre>\nPasso 7<\/h3>\n
style.css<\/code> deve corrispondere.<\/p>\n![\"File](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/icona-file-caratteri-sftp.png\")
Passo 8<\/h3>\n
<i class=\"fa fa-cog\"><\/i><\/code><\/pre>\ni<\/code>. Potete usare anche elementi span<\/code> regolari, oltre ad aggiungere CSS alle vostre classi personalizzate.<\/p>\n![\"Esempio](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/font-awesome-esempio-perfmatters.png\")
![\"Dimensione](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2015\/10\/dimensione-file-woff-2-font-awesome.png\")
Problemi di Accessibilit\u00e0 degli Icon Font<\/h2>\n
aria-hidden=\"true\"<\/code> per indicare ai lettori di schermo che devono scartare il nostro elemento.<\/p>\n<span class=\"icon icon-star\" aria-hidden=\"true\"><\/span> My Favourites<\/code><\/pre>\nRiepilogo<\/h2>\n