{"id":130587,"date":"2025-11-10T09:00:00","date_gmt":"2025-11-10T08:00:00","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=130587"},"modified":"2025-10-24T10:24:18","modified_gmt":"2025-10-24T08:24:18","slug":"icone-wordpress","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/icone-wordpress\/","title":{"rendered":"Icone WordPress: come usare i font icona su WP"},"content":{"rendered":"\n<p>Le <strong>icone WordPress<\/strong> sono diventate negli ultimi anni uno degli elementi grafici pi\u00f9 utilizzati nella progettazione di siti web. Non si tratta solo di dettagli estetici: un\u2019icona ben scelta e posizionata al posto giusto migliora la leggibilit\u00e0 dei contenuti, rende pi\u00f9 immediata la navigazione e aiuta l\u2019utente a orientarsi, contribuendo in modo diretto alla <strong>user experience<\/strong>.<\/p>\n\n\n\n<p>In questo articolo vedremo nel dettaglio che cosa sono le icone e quali tipologie esistono, come funzionano i <strong>font icona<\/strong>, quali sono le alternative moderne come le <strong>icone SVG<\/strong> e, soprattutto, quali sono i metodi pi\u00f9 semplici e pratici per inserire icone su WordPress. Analizzeremo l\u2019uso di plugin, le soluzioni manuali, le integrazioni con i page builder pi\u00f9 diffusi e le best practice per non compromettere le prestazioni e l\u2019accessibilit\u00e0 del sito.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#limportanza-delle-icone\">L&#8217;importanza delle icone<\/a><\/li><li><a href=\"#icone-word-press-cosa-sono\">Tipologie di icone per WordPress<\/a><ul><li><a href=\"#icone-raster\">Icone raster<\/a><\/li><li><a href=\"#le-icone-svg-in-word-press\">Le icone SVG in WordPress<\/a><\/li><li><a href=\"#i-font-icona-in-word-press\">I font icona in WordPress<\/a><\/li><\/ul><\/li><li><a href=\"#utilizzare-un-tema-word-press\">Utilizzare un tema WordPress con le icone integrate<\/a><\/li><li><a href=\"#utilizzare-un-builder-con-icon-font-integrati\">Scegliere un builder con icon font integrati<\/a><\/li><li><a href=\"#le-icone-svg-in-word-press-1\">Utilizzare Font Awesome<\/a><ul><li><a href=\"#installare-il-plugin-in-font-awesome\">Installare il plugin in Font Awesome<\/a><\/li><li><a href=\"#come-inserire-le-icone-su-word-press-con-font-awesome\">Aggiungere icone WordPress tramite il blocco<\/a><\/li><li><a href=\"#utilizzare-gli-shortcode\">Utilizzare gli shortcode<\/a><\/li><li><a href=\"#inserire-manualmente-le-icone-in-word-press\">Inserire manualmente le icone in WordPress<\/a><\/li><\/ul><\/li><li><a href=\"#dashicons\">Utilizzare Dashicons<\/a><\/li><li><a href=\"#material-icons-di-google\">Utilizzare Material Icons<\/a><\/li><li><a href=\"#configurare-un-set-di-font-icone-word-press-personalizzato\">Configurare un set di font icone WordPress personalizzato<\/a><\/li><li><a href=\"#errori-da-evitare\">Errori da evitare<\/a><\/li><li><a href=\"#conclusioni\">Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"limportanza-delle-icone\">L&#8217;importanza delle icone<\/h2>\n\n\n\n<p>Diversi studi al riguardo hanno mostrato che le immagini vengono ricordate ed elaborate meglio rispetto al testo. <a href=\"https:\/\/www.nngroup.com\/articles\/picture-superiority-effect\/\" rel=\"noopener\">Uno studio di <strong>Nielsen Norman Group<\/strong><\/a> &#8211; uno dei punti di riferimento nel settore &#8211; ha descritto questo fenomeno con il termine<em><strong> <\/strong><\/em><strong>Picture Superiority Effect<\/strong>, sottolineando come le informazioni veicolate in forma visiva siano percepite e memorizzate in maniera pi\u00f9 efficace rispetto a quelle trasmesse solo tramite parole.<\/p>\n\n\n\n<p>Le icone sfruttano proprio questo meccanismo: con un semplice simbolo riescono a <strong>comunicare rapidamente un concetto riducendo lo sforzo cognitivo<\/strong> richiesto all\u2019utente, un dettaglio non da poco quando si parla di <a href=\"https:\/\/supporthost.com\/it\/web-designer\/\" data-type=\"post\" data-id=\"72050\">web design<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"257\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/picture-superiority-effect-1024x257.png\" alt=\"Picture Superiority Effect\" class=\"wp-image-130827\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/picture-superiority-effect-1024x257.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/picture-superiority-effect-300x75.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/picture-superiority-effect-768x193.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/picture-superiority-effect-120x30.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/picture-superiority-effect.png 1145w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"icone-word-press-cosa-sono\">Tipologie di icone per WordPress<\/h2>\n\n\n\n<p>Quando parliamo di <strong>icone in WordPress<\/strong> ci riferiamo a piccoli elementi grafici che hanno la funzione di <strong>rappresentare in maniera visiva un concetto, un\u2019azione o una sezione del tuo sito WordPress<\/strong>. La loro utilit\u00e0 risiede nella capacit\u00e0 di sostituire o rafforzare il testo, rendendo immediatamente chiaro all\u2019utente ci\u00f2 che si trover\u00e0 cliccando su un link o interagendo con un pulsante.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"187\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icon-menu-1024x187.png\" alt=\"Font Icon Menu\" class=\"wp-image-130832\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icon-menu-1024x187.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icon-menu-300x55.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icon-menu-768x140.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icon-menu-120x22.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icon-menu-1536x280.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icon-menu.png 1957w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In un sito WordPress, le icone possono essere utilizzate in moltissimi contesti: nei <strong>menu di navigazione<\/strong> per distinguere le voci principali (qui in alto un esempio pratico relativo al nostro menu), nei <strong>pulsanti call-to-action<\/strong> per rendere pi\u00f9 intuitiva l\u2019azione richiesta, nei <strong>widget<\/strong> per rafforzare la funzione del contenuto e persino negli articoli per rendere pi\u00f9 visibile un\u2019informazione. In ognuno di questi casi, la funzione dell\u2019icona <strong>non \u00e8 solo estetica<\/strong>: essa contribuisce a migliorare la <strong>user experience<\/strong> e a guidare l\u2019attenzione dell\u2019utente verso i punti chiave della pagina.<\/p>\n\n\n\n<p>Le icone sono inoltre molto comode per identificare in maniera rapida gli elementi che corrispondono alle azioni pi\u00f9 comuni a quasi tutti i siti web come, ad esempio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>la <strong>lente di ingrandimento<\/strong> che indica la ricerca;<\/li>\n\n\n\n<li>la <strong>busta da lettera<\/strong> che segnala la possibilit\u00e0 di inviare una mail;<\/li>\n\n\n\n<li>la <strong>cornetta di un telefono<\/strong> per chiamare un numero fisso o mobile;<\/li>\n\n\n\n<li>il <strong>carrello <\/strong>per il riepilogo acquisti su un e-commerce;<\/li>\n\n\n\n<li>il <strong>mezzo busto di una persona<\/strong> per accedere al proprio account;<\/li>\n\n\n\n<li>le <strong>brand icon<\/strong> che rimandano ai principali social.<\/li>\n<\/ul>\n\n\n\n<p>Le icone WordPress per\u00f2 non sono tutte uguali e possono essere implementate in modi diversi. Possiamo distinguere fra tre tipologie principali:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>icone raster<\/strong>: solitamente in formato <strong>PNG<\/strong> o <strong>JPG<\/strong>, sono immagini statiche che non possono essere ridimensionate senza perdita di qualit\u00e0. Sono adatte per elementi decorativi, ma meno flessibili in un contesto dinamico; <\/li>\n\n\n\n<li><strong>icone vettoriali<\/strong>: come i file <strong>SVG<\/strong> (Scalable Vector Graphics), si basano su tracciati matematici e mantengono una resa perfetta a qualsiasi dimensione, caratteristica fondamentale quando si parla di web responsive.<\/li>\n\n\n\n<li><strong>font icona<\/strong> (o icon font): set di simboli che funzionano in modo simile ai caratteri tipografici e che permettono di inserire e personalizzare le icone tramite CSS.<\/li>\n<\/ol>\n\n\n\n<p>Vediamole pi\u00f9 nel dettaglio una per una.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"icone-raster\">Icone raster<\/h3>\n\n\n\n<p>Prima dell\u2019affermazione dei font icona e delle icone vettoriali la maggior parte dei siti web utilizzava le <strong>icone raster<\/strong>, ovvero immagini statiche in formati come <strong>PNG<\/strong>, <strong><a href=\"https:\/\/supporthost.com\/it\/jpeg-vs-jpg\/\">JPEG\/JPG<\/a><\/strong> o, in passato, <strong>GIF<\/strong>. Si tratta di file basati su pixel che rappresentano l\u2019icona come una piccola immagine digitale &#8211; come quella che vedi qui sotto &#8211; in formato png.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"480\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/rss-feed-icona.png\" alt=\"Rss Feed Icona\" class=\"wp-image-70529\" style=\"width:243px;height:auto\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/rss-feed-icona.png 480w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/rss-feed-icona-300x300.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/rss-feed-icona-150x150.png 150w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/08\/rss-feed-icona-63x63.png 63w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<p>Le icone raster hanno avuto un ruolo importante nello sviluppo del web perch\u00e9 garantivano una <strong>resa fedele e precisa dei dettagli grafici<\/strong>. Ancora oggi in alcuni casi specifici possono essere una scelta adeguata, ad esempio quando si desidera utilizzare loghi ufficiali o simboli che non devono subire alterazioni stilistiche. Tuttavia, in un contesto dinamico come quello di WordPress, i loro svantaggi superano i benefici.<\/p>\n\n\n\n<p>Il primo problema \u00e8 legato alla <strong>scalabilit\u00e0<\/strong>: se usate in un sito che deve adattarsi a schermi molto diversi, dalle dimensioni ridotte di uno smartphone alle risoluzioni elevate dei monitor moderni, rischiano di risultare sfocate o sproporzionate. Un secondo limite poi riguarda il <strong>peso dei file<\/strong>: inserire molte icone raster in una pagina pu\u00f2 aumentare sensibilmente i tempi di caricamento, penalizzando le prestazioni complessive del sito.<\/p>\n\n\n\n<p>Dal punto di vista pratico, in WordPress \u00e8 possibile <strong>caricare icone raster come qualsiasi altra immagine<\/strong> attraverso la libreria media, ma questa soluzione \u00e8 sempre meno comune, visto che le alternative vettoriali offrono maggiore flessibilit\u00e0.<\/p>\n\n\n\n<p>Se l\u2019obiettivo \u00e8 arricchire l\u2019interfaccia di un sito WordPress con elementi grafici leggeri, scalabili e personalizzabili, le soluzioni basate su <strong>font icona<\/strong> o <strong>SVG<\/strong> sono nettamente preferibili. Le raster restano utili solo in contesti limitati, ad esempio per loghi brandizzati forniti in formati non vettoriali (vedi l&#8217;esempio a seguire per le icone di Google) o in situazioni in cui l\u2019aspetto grafico debba rimanere identico all\u2019originale senza possibilit\u00e0 di modifiche.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"577\" height=\"561\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/branded-icon.png\" alt=\"Branded Icon\" class=\"wp-image-130828\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/branded-icon.png 577w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/branded-icon-300x292.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/branded-icon-65x63.png 65w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"le-icone-svg-in-word-press\">Le icone SVG in WordPress<\/h3>\n\n\n\n<p>L\u2019acronimo <strong>SVG <\/strong>sta per <strong>Scalable Vector Graphics<\/strong>, un formato basato su grafica vettoriale che descrive forme, tracciati e colori attraverso codice XML. A differenza delle immagini raster come PNG o JPG, gli SVG non si basano su pixel ma su equazioni matematiche, e questo garantisce un vantaggio fondamentale: la capacit\u00e0 di <strong>scalare all\u2019infinito senza perdere definizione<\/strong>.<\/p>\n\n\n\n<p>Nello screenshot a seguire trovi un esempio di icone SVG estratto direttamente dalla nostra homepage.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"426\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-svg-1024x426.png\" alt=\"Icone WordPress Svg\" class=\"wp-image-130606\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-svg-1024x426.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-svg-300x125.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-svg-768x319.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-svg-120x50.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-svg-1536x639.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-svg-2048x852.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>E qui sotto una delle suddette icone in formato SVG:<\/p>\n\n\n\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:48px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 122.9 122.9\"><path d=\"M99.4,29.1l0.2,0l0,0l0.3,0.1c0.2,0,0.3,0.1,0.5,0.1c0.2,0,0.4,0,0.6,0l1.8-0.2c1.7-0.2,3.4,0.1,4.8,0.9l0,0 l0,0c1.4,0.8,2.5,2.1,3.2,3.7l0.7,1.7l0.1,0.1c0.1,0.1,0.1,0.3,0.2,0.4c0.1,0.2,0.2,0.3,0.4,0.5l0,0l0,0l0.2,0.2l0.1,0.1 c0.1,0.1,0.2,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.5,0.3l1.7,0.7c1.6,0.7,2.9,1.8,3.7,3.2c0.8,1.4,1.2,3.1,0.9,4.8l-0.2,1.9 c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0.1,0.6l0,0l0,0c0,0.1,0.1,0.3,0.1,0.4c0,0.2,0.1,0.3,0.2,0.5c0.1,0.2,0.2,0.3,0.3,0.5l1.1,1.5 c1.1,1.4,1.6,3,1.6,4.6h0c0,1.6-0.5,3.2-1.6,4.6l-1.1,1.5c-0.1,0.2-0.2,0.3-0.3,0.5c-0.1,0.2-0.2,0.4-0.2,0.6l0,0l0,0l-0.1,0.3 l0,0.1c0,0.2-0.1,0.3-0.1,0.5c0,0.2,0,0.4,0,0.6l0.2,1.8c0.2,1.7-0.1,3.4-0.9,4.8l-0.1,0.1c-0.8,1.3-2,2.4-3.6,3.1l-1.7,0.7 l-0.1,0.1c-0.1,0.1-0.3,0.1-0.4,0.2c-0.2,0.1-0.3,0.2-0.5,0.4l-0.2,0.2c-0.1,0.1-0.3,0.3-0.4,0.5c-0.1,0.2-0.2,0.3-0.3,0.5 l-0.7,1.7c-0.7,1.6-1.8,2.9-3.2,3.7c-1.4,0.8-3.1,1.2-4.8,0.9l-1.9-0.2c-0.2,0-0.4,0-0.6,0c-0.2,0-0.4,0-0.6,0.1l0,0l0,0l-0.4,0.1 c-0.2,0-0.3,0.1-0.4,0.2l0,0c-0.2,0.1-0.4,0.2-0.5,0.3l-1.5,1.1c-1.4,1.1-3,1.6-4.6,1.6c-1.6,0-3.2-0.5-4.6-1.6l-1.5-1.1 c-0.2-0.1-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.6-0.2l0,0l0,0l-0.3-0.1l-0.1,0c-0.2,0-0.3-0.1-0.5-0.1l0,0c-0.2,0-0.4,0-0.6,0 l-1.9,0.2C80,84.2,78.4,83.8,77,83l0,0l0,0c-1.4-0.8-2.5-2.1-3.2-3.7L73,77.6c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.2-0.2-0.3-0.4-0.5 l-0.2-0.2c-0.1-0.1-0.3-0.3-0.5-0.4c-0.1-0.1-0.3-0.2-0.5-0.3L69.4,75c-1.6-0.7-2.9-1.8-3.7-3.2c-0.8-1.4-1.2-3.1-0.9-4.8l0.2-1.8 c0-0.2,0-0.4,0-0.6l0,0c0-0.2,0-0.4-0.1-0.6h0l0-0.1l-0.1-0.2c0-0.2-0.1-0.3-0.2-0.5c-0.1-0.2-0.2-0.3-0.3-0.5l-1.1-1.5 c-1.1-1.4-1.6-3-1.6-4.6c0-1.6,0.5-3.2,1.6-4.6l1.1-1.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.1-0.4,0.2-0.5l0,0c0-0.2,0,0,0.1-0.3 l0,0l0.1-0.2c0-0.2,0.1-0.3,0.1-0.5c0-0.2,0-0.4,0-0.6L64.8,46c-0.2-1.7,0.1-3.4,0.9-4.8c0.8-1.4,2.1-2.5,3.7-3.2 c0.1,0,0.1,0,0.2-0.1l1.6-0.7l0,0c0.2-0.1,0.4-0.2,0.5-0.3c0.2-0.1,0.3-0.2,0.5-0.4l0.2-0.2c0.1-0.1,0.3-0.3,0.4-0.5 c0.1-0.1,0.2-0.3,0.3-0.5l0.7-1.7c0.7-1.6,1.8-2.9,3.2-3.7c1.4-0.8,3.1-1.2,4.8-0.9l1.9,0.2c0.2,0,0.4,0,0.6,0c0.2,0,0.4,0,0.6-0.1 l0,0l0,0l0.4-0.1c0.2,0,0.3-0.1,0.5-0.2c0.2-0.1,0.3-0.2,0.5-0.3l1.5-1.1c1.4-1.1,3-1.6,4.6-1.6c1.6,0,3.2,0.5,4.6,1.6l1.5,1.1 c0.2,0.1,0.3,0.2,0.5,0.3C99.1,29,99.2,29.1,99.4,29.1L99.4,29.1z M98.4,33.6l-0.1,0c-0.5-0.1-1-0.3-1.4-0.5 c-0.4-0.2-0.9-0.5-1.3-0.8l-1.5-1.1c-0.5-0.4-1.2-0.6-1.8-0.6c-0.6,0-1.3,0.2-1.8,0.6l-1.5,1.1c-0.4,0.3-0.8,0.6-1.3,0.8 c-0.4,0.2-0.8,0.4-1.3,0.5L86,33.6l0,0c-0.5,0.1-1,0.2-1.5,0.3c-0.5,0-1,0-1.5-0.1l-1.9-0.2c-0.7-0.1-1.3,0.1-1.9,0.4 c-0.5,0.3-1,0.8-1.3,1.5l-0.7,1.7c-0.2,0.5-0.4,0.9-0.7,1.3c-0.3,0.4-0.6,0.8-1,1.2l-0.2,0.2c-0.4,0.4-0.7,0.7-1.1,1 c-0.4,0.3-0.8,0.5-1.3,0.7l0,0l-1.6,0.7c-0.1,0-0.1,0.1-0.2,0.1c-0.6,0.3-1.2,0.7-1.5,1.3c-0.3,0.6-0.5,1.2-0.4,1.9l0.2,1.8 c0.1,0.5,0.1,1,0.1,1.5c0,0.4-0.1,0.8-0.2,1.3l-0.1,0.2l0,0l0,0c0,0.1,0-0.2,0,0.2l0,0l0,0c-0.1,0.5-0.3,1-0.5,1.4 c-0.2,0.4-0.5,0.9-0.8,1.3l-1.1,1.5c-0.4,0.5-0.6,1.2-0.6,1.8c0,0.6,0.2,1.3,0.6,1.8l1.1,1.5c0.3,0.4,0.6,0.8,0.8,1.3 c0.2,0.4,0.4,0.8,0.5,1.3l0.1,0.4l0,0c0.1,0.5,0.2,0.9,0.3,1.4l0,0.1c0,0.5,0,1-0.1,1.5l-0.2,1.8c-0.1,0.7,0.1,1.4,0.4,1.9 c0.3,0.5,0.8,1,1.5,1.3l1.7,0.7c0.5,0.2,0.9,0.4,1.3,0.7c0.4,0.3,0.8,0.6,1.1,1l0.2,0.2c0.4,0.4,0.7,0.8,1,1.2 c0.3,0.4,0.5,0.8,0.7,1.3l0.7,1.7c0.3,0.6,0.7,1.1,1.3,1.5l0,0c0.6,0.3,1.2,0.5,1.9,0.4l1.9-0.2c0.5-0.1,1-0.1,1.4-0.1l0.1,0 c0.4,0,0.8,0.1,1.3,0.2l0.2,0l0.3,0.1l0,0c0.5,0.1,1,0.3,1.4,0.5c0.4,0.2,0.9,0.5,1.3,0.8l1.5,1.1c0.5,0.4,1.2,0.6,1.8,0.6 c0.6,0,1.3-0.2,1.8-0.6l1.5-1.1c0.4-0.3,0.9-0.6,1.3-0.8l0,0l0,0c0.4-0.2,0.8-0.3,1.2-0.5l0.2,0l0.3-0.1l0,0c0.5-0.1,1-0.2,1.5-0.3 c0.5,0,1,0,1.5,0.1l1.9,0.2c0.7,0.1,1.4-0.1,1.9-0.4c0.5-0.3,1-0.8,1.3-1.5l0.7-1.7c0.2-0.5,0.4-0.9,0.7-1.3c0.3-0.4,0.6-0.8,1-1.1 l0.2-0.2c0.4-0.4,0.7-0.7,1.1-1c0.3-0.2,0.7-0.4,1.1-0.6c0.1,0,0.1-0.1,0.2-0.1l1.7-0.7c0.6-0.3,1.1-0.7,1.4-1.2l0.1-0.1 c0.3-0.6,0.5-1.2,0.4-1.9l-0.2-1.8c-0.1-0.5-0.1-1-0.1-1.5c0-0.4,0.1-0.8,0.2-1.3l0-0.2l0.1-0.3l0,0c0.1-0.5,0.3-1,0.5-1.4 c0.2-0.4,0.5-0.9,0.8-1.3l1.1-1.5c0.4-0.6,0.6-1.2,0.6-1.8h0c0-0.6-0.2-1.3-0.6-1.8l-1.1-1.5c-0.3-0.4-0.6-0.8-0.8-1.3 c-0.2-0.4-0.3-0.8-0.5-1.2l0-0.2l-0.1-0.3l0,0c-0.1-0.5-0.2-1-0.3-1.5c0-0.5,0-1,0.1-1.5l0.2-1.9c0.1-0.7-0.1-1.3-0.4-1.9 c-0.3-0.5-0.8-1-1.5-1.3l-1.7-0.7c-0.5-0.2-0.9-0.4-1.3-0.7c-0.4-0.2-0.7-0.5-1-0.8l-0.1-0.1l-0.2-0.2l0,0c-0.4-0.4-0.7-0.7-1-1.1 c-0.2-0.3-0.4-0.7-0.6-1.1c0-0.1-0.1-0.1-0.1-0.2l-0.7-1.7c-0.3-0.6-0.7-1.2-1.3-1.5l0,0c-0.6-0.3-1.2-0.5-1.9-0.4l-1.8,0.2 c-0.5,0.1-1,0.1-1.5,0.1c-0.4,0-0.8-0.1-1.3-0.2l-0.2,0L98.4,33.6L98.4,33.6z\"><\/path><path d=\"M94.4,40.5l3.2,9l9.7,0.3c1.3,0,2.3,1.1,2.2,2.4c0,0.7-0.4,1.4-0.9,1.8l0,0l-7.6,5.8l2.7,9.3 c0.4,1.2-0.3,2.5-1.6,2.9c-0.7,0.2-1.4,0.1-1.9-0.3l-7.9-5.4l-8,5.5c-1.1,0.7-2.5,0.4-3.2-0.6c-0.4-0.6-0.5-1.3-0.3-2l2.7-9.2 l-7.7-5.9c-1-0.8-1.2-2.2-0.4-3.2c0.5-0.6,1.2-0.9,1.9-0.9l9.5-0.2l3.3-9.1c0.4-1.2,1.7-1.8,2.9-1.4C93.7,39.3,94.2,39.8,94.4,40.5 L94.4,40.5z M93.8,52.5l-1.6-4.4l-1.6,4.4c-0.3,0.9-1.1,1.6-2.1,1.6l-4.7,0.1l3.7,2.9c0.8,0.6,1.2,1.6,0.9,2.6l-1.3,4.5l4-2.7 c0.8-0.5,1.8-0.5,2.6,0l3.9,2.7l-1.3-4.5c-0.3-0.9,0-2,0.8-2.6l3.7-2.8L96,54.1C95,54.1,94.1,53.5,93.8,52.5z\"><\/path><path d=\"M112.4,75.5v45c0,1.3-1,2.3-2.3,2.3c-0.6,0-1.2-0.3-1.7-0.7l-16.1-13.6L76,122.3c-1,0.8-2.4,0.7-3.2-0.3 c-0.4-0.4-0.5-1-0.5-1.5h0v-45c0-1.3,1-2.3,2.3-2.3c0.8,0,1.5,0.4,2,1.1c0.2,0.2,0.3,0.4,0.4,0.6c0,0.1,0.1,0.1,0.1,0.2 c0.1,0.2,0.2,0.5,0.3,0.7l0.1,0.2l0.7,1.6l0,0c0.3,0.6,0.7,1.1,1.3,1.5l0.1,0.1c0.5,0.3,1.2,0.4,1.8,0.3l1.9-0.2 c0.5-0.1,1-0.1,1.5-0.1l0,0c0.5,0,1,0.1,1.5,0.3l0,0l0.4,0.1c0.5,0.1,0.9,0.3,1.3,0.5l0,0l0,0c0.4,0.2,0.8,0.5,1.3,0.8l1.5,1.1 c0.5,0.4,1.2,0.6,1.8,0.6c0.6,0,1.3-0.2,1.8-0.6l1.5-1.1c0.4-0.3,0.9-0.6,1.3-0.8l0.1-0.1c0.4-0.2,0.8-0.3,1.3-0.4l0,0l0.3-0.1 l0.2,0c0.4-0.1,0.9-0.2,1.3-0.2c0.5,0,1,0,1.5,0.1l1.9,0.2c0.7,0.1,1.4,0,1.9-0.4l0,0c0.5-0.3,1-0.8,1.3-1.5l0.7-1.7 c0.1-0.3,0.3-0.6,0.4-0.9c0.2-0.3,0.3-0.5,0.5-0.8c0.8-1,2.2-1.2,3.2-0.4C112.1,74.2,112.4,74.8,112.4,75.5L112.4,75.5L112.4,75.5z M107.8,115.6V82.9l-0.2,0.1l0,0l0,0c-1.4,0.8-3.1,1.2-4.8,0.9l-1.9-0.2c-0.2,0-0.4,0-0.6,0c-0.2,0-0.3,0-0.5,0.1l-0.1,0l-0.3,0.1 l0,0l0,0c-0.2,0-0.3,0.1-0.5,0.2l-0.1,0c-0.2,0.1-0.4,0.2-0.5,0.3l-1.5,1.1c-1.4,1.1-3,1.6-4.6,1.6c-1.6,0-3.2-0.5-4.6-1.6 l-1.5-1.1c-0.1-0.1-0.3-0.2-0.5-0.3l0,0c-0.2-0.1-0.3-0.1-0.5-0.2l-0.2-0.1l-0.1,0l0,0c-0.2-0.1-0.4-0.1-0.6-0.1 c-0.2,0-0.4,0-0.6,0l-1.9,0.2c-1.7,0.2-3.3-0.1-4.6-0.9L77,83l-0.2-0.1v32.7l14-11.8c0.8-0.7,2.1-0.8,3,0L107.8,115.6z\"><\/path><path d=\"M90,84.8c0-1.3,1-2.3,2.3-2.3c1.3,0,2.3,1,2.3,2.3v20.8c0,1.3-1,2.3-2.3,2.3c-1.3,0-2.3-1-2.3-2.3V84.8z\"><\/path><path d=\"M66.4,103.9c1.3,0,2.3,1,2.3,2.3c0,1.3-1,2.3-2.3,2.3H8.5c-2.3,0-4.5-1-6-2.5l0,0C1,104.5,0,102.4,0,100V83.1 c0-2.3,1-4.5,2.5-6c0,0,0.1-0.1,0.1-0.1c1.5-1.5,3.6-2.4,5.9-2.4h53.2c1.3,0,2.3,1,2.3,2.3c0,1.3-1,2.3-2.3,2.3H8.5 c-1,0-2,0.4-2.7,1.1l-0.1,0.1C5.1,81,4.6,82,4.6,83.1V100c0,1.1,0.4,2.1,1.2,2.8l0,0l0,0c0.7,0.7,1.7,1.1,2.8,1.1H66.4z\"><\/path><path d=\"M17.9,84.5c1.9,0,3.7,0.8,5,2.1l0,0c1.3,1.3,2.1,3,2.1,5c0,1.9-0.8,3.7-2.1,5l0,0c-1.3,1.3-3,2.1-5,2.1 c-1.9,0-3.7-0.8-5-2.1l0,0l0,0c-1.3-1.3-2.1-3-2.1-5c0-1.9,0.8-3.7,2.1-5l0,0C14.2,85.3,16,84.5,17.9,84.5L17.9,84.5z M19.6,89.8 c-0.4-0.4-1-0.7-1.7-0.7c-0.7,0-1.3,0.3-1.7,0.7l0,0l0,0c-0.4,0.4-0.7,1-0.7,1.7c0,0.7,0.3,1.3,0.7,1.7l0,0 c0.4,0.4,1.1,0.7,1.7,0.7c0.7,0,1.3-0.3,1.7-0.7l0,0c0.4-0.4,0.7-1,0.7-1.7C20.4,90.9,20.1,90.3,19.6,89.8L19.6,89.8L19.6,89.8z\"><\/path><path d=\"M59,66.7c1.3,0,2.3,1,2.3,2.3c0,1.3-1,2.3-2.3,2.3H8.5c-2.3,0-4.5-1-6-2.5c0,0-0.1-0.1-0.1-0.1 C0.9,67.1,0,65,0,62.7V45.8c0-2.3,1-4.5,2.5-6c0,0,0.1-0.1,0.1-0.1c1.5-1.5,3.6-2.4,5.9-2.4h51.4c1.3,0,2.3,1,2.3,2.3 c0,1.3-1,2.3-2.3,2.3H8.5c-1,0-2,0.4-2.7,1.1l-0.1,0.1c-0.7,0.7-1.2,1.7-1.2,2.8v16.9c0,1,0.4,2,1.1,2.7l0.1,0.1 c0.7,0.7,1.7,1.2,2.8,1.2H59z\"><\/path><path d=\"M64.1,29.4c1.3,0,2.3,1,2.3,2.3c0,1.3-1,2.3-2.3,2.3H8.5c-2.3,0-4.5-1-6-2.5c0,0-0.1-0.1-0.1-0.1 C0.9,29.8,0,27.7,0,25.5V8.5c0-2.3,1-4.5,2.5-6c0,0,0.1-0.1,0.1-0.1C4.2,0.9,6.3,0,8.5,0H100c2.3,0,4.5,1,6,2.5l0,0l0,0 c1.5,1.5,2.5,3.7,2.5,6v14.9c0,1.3-1,2.3-2.3,2.3c-1.3,0-2.3-1-2.3-2.3V8.5c0-1.1-0.4-2.1-1.2-2.8l0,0c-0.7-0.7-1.7-1.1-2.8-1.1 H8.5c-1,0-2,0.4-2.7,1.1L5.8,5.8C5.1,6.5,4.6,7.5,4.6,8.5v16.9c0,1,0.4,2,1.1,2.7l0.1,0.1c0.7,0.7,1.7,1.2,2.8,1.2H64.1z\"><\/path><path d=\"M17.9,47.2c1.9,0,3.7,0.8,5,2.1l0,0c1.3,1.3,2.1,3,2.1,5c0,1.9-0.8,3.7-2.1,5l0,0c-1.3,1.3-3,2.1-5,2.1 c-1.9,0-3.7-0.8-5-2.1l0,0l0,0c-1.3-1.3-2.1-3-2.1-5c0-1.9,0.8-3.7,2.1-5c0,0,0.1-0.1,0.2-0.1C14.3,48,16,47.2,17.9,47.2L17.9,47.2 z M19.6,52.5c-0.4-0.4-1-0.7-1.7-0.7c-0.6,0-1.2,0.2-1.6,0.6l-0.1,0.1c-0.4,0.4-0.7,1.1-0.7,1.7c0,0.7,0.3,1.3,0.7,1.7l0,0 c0.4,0.4,1.1,0.7,1.7,0.7c0.7,0,1.3-0.3,1.7-0.7l0,0c0.4-0.4,0.7-1,0.7-1.7C20.4,53.6,20.1,53,19.6,52.5L19.6,52.5z\"><\/path><path d=\"M17.9,9.9c1.9,0,3.7,0.8,5,2.1l0,0c1.3,1.3,2.1,3,2.1,5c0,1.9-0.8,3.7-2.1,5c-0.1,0.1-0.1,0.1-0.2,0.1 c-1.3,1.2-3,1.9-4.8,1.9c-1.9,0-3.7-0.8-5-2.1c-0.1-0.1-0.1-0.1-0.1-0.2c-1.2-1.3-1.9-3-1.9-4.8c0-1.9,0.8-3.7,2.1-5 c0,0,0.1-0.1,0.2-0.1C14.3,10.7,16,9.9,17.9,9.9L17.9,9.9z M19.6,15.3c-0.4-0.4-1-0.7-1.7-0.7c-0.6,0-1.2,0.2-1.6,0.6l-0.1,0.1 c-0.4,0.4-0.7,1.1-0.7,1.7c0,0.6,0.2,1.2,0.6,1.6l0.1,0.1c0.4,0.4,1.1,0.7,1.7,0.7c0.6,0,1.2-0.2,1.6-0.6l0.1-0.1 c0.4-0.4,0.7-1.1,0.7-1.7C20.4,16.3,20.1,15.7,19.6,15.3L19.6,15.3z\"><\/path><path d=\"M67.4,19.3c0.9,0,1.7-0.5,2.1-1.3c0.7-1.5-0.4-3.3-2.1-3.3h-4.6c-0.9,0-1.7,0.5-2.1,1.3 c-0.7,1.5,0.4,3.3,2.1,3.3H67.4z\"><\/path><path d=\"M80.1,19.3c0.9,0,1.7-0.5,2.1-1.3c0.7-1.5-0.4-3.3-2.1-3.3h-4.6c-0.9,0-1.7,0.5-2.1,1.3 c-0.7,1.5,0.4,3.3,2.1,3.3H80.1z\"><\/path><path d=\"M92.9,19.3c0.9,0,1.7-0.5,2.1-1.3c0.7-1.5-0.4-3.3-2.1-3.3h-4.6c-0.9,0-1.7,0.5-2.1,1.3 c-0.7,1.5,0.4,3.3,2.1,3.3H92.9z\"><\/path><path d=\"M15.2,76.9V69c0-1.3,1-2.3,2.3-2.3c1.3,0,2.3,1,2.3,2.3v7.9c0,1.3-1,2.3-2.3,2.3 C16.2,79.2,15.2,78.2,15.2,76.9z\"><\/path><path d=\"M15.2,39.6v-7.9c0-1.3,1-2.3,2.3-2.3c1.3,0,2.3,1,2.3,2.3v7.9c0,1.3-1,2.3-2.3,2.3 C16.2,41.9,15.2,40.9,15.2,39.6z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p>Un\u2019icona SVG mantiene sempre una resa perfetta, sia che venga visualizzata su uno schermo di pochi pollici, sia su un monitor 4K. Inoltre, trattandosi di un file di testo, un\u2019icona SVG pu\u00f2 essere facilmente compressa, modificata e ottimizzata, risultando spesso <strong>pi\u00f9 leggera <\/strong>delle librerie di font icona.<\/p>\n\n\n\n<p>Un altro vantaggio significativo degli SVG riguarda la <strong>personalizzazione<\/strong>. Mentre i font icona sono generalmente monocromatici, un file SVG pu\u00f2 contenere <strong>pi\u00f9 colori, gradienti e persino animazioni<\/strong>. Questo apre la strada a soluzioni grafiche molto pi\u00f9 creative e flessibili. Gli sviluppatori possono intervenire direttamente sul codice dell\u2019icona o applicare stili tramite CSS per modificarne dimensione, riempimento o contorno.<\/p>\n\n\n\n<p>Sul fronte dell\u2019<strong>accessibilit\u00e0<\/strong> le icone SVG sono considerate molto efficaci. Essendo elementi semantici, possono essere arricchiti con attributi come <code>title<\/code> o <code>desc<\/code>, rendendo il loro significato interpretabile anche dai lettori di schermo. Questo le rende particolarmente adatte a chi sviluppa siti inclusivi, in linea con le linee guida internazionali come le <strong><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\" rel=\"noopener\">WCAG o Web Content Accessibility Guidelines<\/a><\/strong>.<\/p>\n\n\n\n<p>L\u2019uso degli SVG in WordPress richiede un minimo di <strong>attenzione dal punto di vista della sicurezza<\/strong>, perch\u00e9 un file SVG contiene codice e, se caricato senza filtri adeguati, potrebbe includere istruzioni malevole. Per questo motivo WordPress, di default, non permette il caricamento diretto di file SVG nella libreria media. Esistono tuttavia plugin affidabili che abilitano questa funzione: nella nostra <a href=\"https:\/\/supporthost.com\/it\/formato-svg\/\">guida dedicata al formato SVG<\/a> troverai maggiori informazioni in merito.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-font-icona-in-word-press\">I font icona in WordPress<\/h3>\n\n\n\n<p>Fra tutti i modi che abbiamo elencato per inserire <strong>icone in WordPress<\/strong>, il pi\u00f9 diffuso \u00e8 sicuramente rappresentato dai <strong>font icona<\/strong>. Come suggerisce il nome si tratta di veri e propri font, cio\u00e8 raccolte di caratteri. Dal punto di vista tecnico funzionano come un normale carattere tipografico: ogni icona corrisponde a un glifo che pu\u00f2 essere richiamato nel codice attraverso una classe CSS o un carattere specifico.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"458\" height=\"289\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/esempio-font-web-safe-times-new-roman.png\" alt=\"Esempio Font Web Safe Times New Roman\" class=\"wp-image-51965\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/esempio-font-web-safe-times-new-roman.png 458w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/esempio-font-web-safe-times-new-roman-300x189.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/esempio-font-web-safe-times-new-roman-100x63.png 100w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/figure>\n\n\n\n<p>Per capire meglio il concetto, si pu\u00f2 fare un paragone con i <strong><a href=\"https:\/\/supporthost.com\/it\/font-web-safe\/\" data-type=\"post\" data-id=\"51964\">font web safe<\/a><\/strong> come Arial, Verdana o Times New Roman, che sono pensati per la leggibilit\u00e0 del testo e <strong>disponibili su praticamente tutti i dispositivi senza bisogno di caricamenti esterni<\/strong>. I font icona funzionano allo stesso modo ma, invece di lettere e numeri, includono una serie di simboli pronti da usare.<\/p>\n\n\n\n<p>Utilizzare i font icon ha avuto grande successo negli anni in cui il web stava diventando sempre pi\u00f9 dinamico, perch\u00e9 permetteva di <strong>superare i limiti delle immagini statiche<\/strong>. Le icone in formato raster, come i file PNG, appesantivano il caricamento delle pagine con impatti notevoli sulla <a href=\"https:\/\/supporthost.com\/it\/velocizzare-wordpress\/\" data-type=\"post\" data-id=\"9328\">velocit\u00e0 dei siti<\/a>, e non potevano essere scalate senza perdita di qualit\u00e0. L\u2019uso dei font icona offre al contrario diversi <strong>vantaggi<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>scalabilit\u00e0<\/strong>: essendo vettoriali, le icone mantengono la stessa nitidezza su schermi di qualsiasi dimensione e risoluzione, caratteristica essenziale per i dispositivi mobile e i monitor ad alta definizione;<\/li>\n\n\n\n<li><strong>leggerezza<\/strong>: invece di caricare decine di immagini separate, basta un unico file che contiene l\u2019intero set;<\/li>\n\n\n\n<li><strong>personalizzazione<\/strong>: le icone possono essere personalizzate con poche <a href=\"https:\/\/supporthost.com\/it\/imparare-css\/\" data-type=\"post\" data-id=\"45822\">regole CSS<\/a>, modificando colore, dimensioni, margini o applicando effetti come hover e animazioni, senza dover creare nuove immagini.<\/li>\n<\/ol>\n\n\n\n<p>Non mancano per\u00f2 alcuni <strong>limiti<\/strong>. I font icona sono generalmente monocromatici, quindi non consentono la stessa flessibilit\u00e0 degli <strong>SVG<\/strong>, che possono essere multicolore o contenere gradienti complessi.<\/p>\n\n\n\n<p>Inoltre, dal punto di vista dell\u2019<strong><a href=\"https:\/\/supporthost.com\/it\/accessibilita-siti-web\/\">accessibilit\u00e0<\/a><\/strong>, i font icona presentano qualche criticit\u00e0: se non implementati correttamente, possono risultare invisibili ai lettori di schermo o generare confusione semantica, dato che il browser li interpreta come caratteri testuali. Per garantire la compatibilit\u00e0 \u00e8 necessario adottare accorgimenti specifici, come l\u2019uso di attributi <code>aria-hidden<\/code> o di testi alternativi.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table data-mtr-unique-id=\"d12f2c699d450c030097e21bc865b0bf-1\" class=\"has-fixed-layout mtr-table mtr-thead-th\"><thead><tr><th data-mtr-content=\"Caratteristica\" class=\"mtr-th-tag\"><div class=\"mtr-cell-content\">Caratteristica<\/div><\/th><th data-mtr-content=\"Icone raster\" class=\"mtr-th-tag\"><div class=\"mtr-cell-content\">Icone raster<\/div><\/th><th data-mtr-content=\"Font icona\" class=\"mtr-th-tag\"><div class=\"mtr-cell-content\">Font icona<\/div><\/th><th data-mtr-content=\"Icone SVG\" class=\"mtr-th-tag\"><div class=\"mtr-cell-content\">Icone SVG<\/div><\/th><\/tr><\/thead><tbody><tr><td data-mtr-content=\"Caratteristica\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Formato<\/div><\/td><td data-mtr-content=\"Icone raster\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">PNG, JPG, GIF<\/div><\/td><td data-mtr-content=\"Font icona\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">File di font (es. Font Awesome, Dashicons)<\/div><\/td><td data-mtr-content=\"Icone SVG\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">File vettoriale in XML<\/div><\/td><\/tr><tr><td data-mtr-content=\"Caratteristica\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Scalabilit\u00e0<\/div><\/td><td data-mtr-content=\"Icone raster\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Limitata (perdita di qualit\u00e0 se ingrandite)<\/div><\/td><td data-mtr-content=\"Font icona\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Buona (vettoriali, sempre nitide)<\/div><\/td><td data-mtr-content=\"Icone SVG\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Eccellente (scalabili all\u2019infinito senza perdita)<\/div><\/td><\/tr><tr><td data-mtr-content=\"Caratteristica\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Peso<\/div><\/td><td data-mtr-content=\"Icone raster\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Relativamente elevato (pi\u00f9 immagini = pi\u00f9 KB)<\/div><\/td><td data-mtr-content=\"Font icona\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Un unico file con centinaia di icone<\/div><\/td><td data-mtr-content=\"Icone SVG\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Molto leggero, file di testo ottimizzabile<\/div><\/td><\/tr><tr><td data-mtr-content=\"Caratteristica\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Colori<\/div><\/td><td data-mtr-content=\"Icone raster\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Multicolore<\/div><\/td><td data-mtr-content=\"Font icona\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Generalmente monocromatiche<\/div><\/td><td data-mtr-content=\"Icone SVG\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Multicolore, gradienti e animazioni possibili<\/div><\/td><\/tr><tr><td data-mtr-content=\"Caratteristica\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Personalizzazione<\/div><\/td><td data-mtr-content=\"Icone raster\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Limitata (bisogna modificare l\u2019immagine)<\/div><\/td><td data-mtr-content=\"Font icona\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Facile tramite CSS (dimensioni, colore, effetti)<\/div><\/td><td data-mtr-content=\"Icone SVG\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Molto flessibile con CSS e inline editing<\/div><\/td><\/tr><tr><td data-mtr-content=\"Caratteristica\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Accessibilit\u00e0<\/div><\/td><td data-mtr-content=\"Icone raster\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Dipende dal testo alternativo<\/div><\/td><td data-mtr-content=\"Font icona\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Criticit\u00e0 con screen reader se non gestite bene<\/div><\/td><td data-mtr-content=\"Icone SVG\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Ottima, con attributi semantici (title, desc, aria)<\/div><\/td><\/tr><tr><td data-mtr-content=\"Caratteristica\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Supporto in WordPress<\/div><\/td><td data-mtr-content=\"Icone raster\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Inseribili come immagini<\/div><\/td><td data-mtr-content=\"Font icona\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Supportati da temi e plugin<\/div><\/td><td data-mtr-content=\"Icone SVG\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Caricabili solo con plugin o codice custom<\/div><\/td><\/tr><tr><td data-mtr-content=\"Caratteristica\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Uso consigliato<\/div><\/td><td data-mtr-content=\"Icone raster\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Loghi o immagini decorative<\/div><\/td><td data-mtr-content=\"Font icona\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Interfacce semplici, siti gi\u00e0 integrati con librerie<\/div><\/td><td data-mtr-content=\"Icone SVG\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Progetti moderni che richiedono flessibilit\u00e0 e accessibilit\u00e0<\/div><\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Tabella comparativa fra i vari tipi di icone WordPress<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"utilizzare-un-tema-word-press\">Utilizzare un tema WordPress con le icone integrate<\/h2>\n\n\n\n<p>Molti temi moderni includono gi\u00e0 un set di icone WordPress preinstallato, come nel caso di <a href=\"https:\/\/supporthost.com\/it\/divi\/\" data-type=\"post\" data-id=\"78110\">Divi Theme<\/a> di cui trovi uno screenshot a seguire che ti mostra le <strong>varie librerie di font icon<\/strong> che il tema mette a tua disposizione.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-divi-1024x506.png\" alt=\"Icone WordPress Divi\" class=\"wp-image-130810\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-divi-1024x506.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-divi-300x148.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-divi-768x380.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-divi-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-divi-1536x760.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-divi-2048x1013.png 1868w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/icone-wordpress-divi.png 1869w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> Si tratta di una soluzione comoda perch\u00e9 permette di inserire e gestire le icone senza dover installare plugin aggiuntivi o modificare il codice del sito.<\/p>\n\n\n\n<p>Per verificare se il tuo tema supporta gi\u00e0 una libreria di icone, puoi consultare la documentazione ufficiale o fare una prova pratica. In molti casi, all\u2019interno del <strong>customizer<\/strong> o dell\u2019editor a blocchi, troverai opzioni che consentono di aggiungere icone WordPress accanto ai menu, ai pulsanti o agli elementi grafici.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"utilizzare-un-builder-con-icon-font-integrati\">Scegliere un builder con icon font integrati<\/h2>\n\n\n\n<p>La stragrande maggioranza dei builder come <strong><a href=\"https:\/\/supporthost.com\/it\/elementor\/\" data-type=\"post\" data-id=\"14364\">Elementor<\/a><\/strong>, <strong><a href=\"https:\/\/supporthost.com\/it\/wpbakery\/\" data-type=\"post\" data-id=\"82105\">WPBakery<\/a><\/strong> o <strong>Kadence<\/strong> includono gi\u00e0 librerie di icone WordPress integrate che puoi applicare a pulsanti, menu, titoli e box informativi.<\/p>\n\n\n\n<p>Prendiamo Elementor come esempio: hai a disposizione sia Font Awesome che, nella versione Pro, di caricare set personalizzati. Questo significa che, oltre alle icone WordPress standard, puoi creare un pacchetto con i tuoi simboli personalizzati (ad esempio il logo del tuo brand in formato icona) e importarli nel builder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icona-elementor-1024x618.png\" alt=\"Font Icona Elementor\" class=\"wp-image-130811\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icona-elementor-1024x618.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icona-elementor-300x181.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icona-elementor-768x464.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icona-elementor-104x63.png 104w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/font-icona-elementor.png 1531w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Una volta caricati, potrai gestirli esattamente come le icone predefinite, scegliendo dimensioni, colori e posizionamento direttamente dall\u2019interfaccia grafica.<\/p>\n\n\n\n<p>Il vantaggio \u00e8 evidente: rapidit\u00e0 e semplicit\u00e0. Ma anche qui ci sono alcuni aspetti da valutare. I page builder tendono a <strong>caricare librerie intere di icone WordPress<\/strong>, anche se ne utilizzi solo poche, e questo pu\u00f2 appesantire le pagine. Inoltre, <strong>sei legato all\u2019ecosistema del builder scelto<\/strong>: se un giorno decidi di passare a un altro sistema, potresti dover reinserire manualmente le icone o risolvere incompatibilit\u00e0.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"le-icone-svg-in-word-press-1\">Utilizzare Font Awesome<\/h2>\n\n\n\n<p>Nel panorama del web design esistono diverse librerie di font icon gi\u00e0 pronte all\u2019uso, che possono essere integrate facilmente anche in un sito WordPress. Tra tutte le librerie <strong><a href=\"https:\/\/fontawesome.com\/\" rel=\"noopener\">Font Awesome<\/a><\/strong> \u00e8 senza dubbio l<strong>a pi\u00f9 conosciuta e utilizzata<\/strong>. Lanciata nel 2012, ha rivoluzionato il modo di inserire icone nei siti web grazie alla sua semplicit\u00e0 di utilizzo e al vastissimo catalogo di simboli disponibili.<\/p>\n\n\n\n<p>Oggi Font Awesome mette a disposizione oltre <strong>2.000 icone gratuite<\/strong> e in pi\u00f9 altre <strong>60.000 icone nelle versioni Pro<\/strong>, che coprono praticamente ogni esigenza grafica: dalle icone social agli elementi di interfaccia, dai simboli dedicati all\u2019e-commerce fino a quelli legati alla tecnologia, alla comunicazione e ai servizi digitali.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontawesome-lista-icone-1024x533.png\" alt=\"Fontawesome Lista Icone\" class=\"wp-image-130616\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontawesome-lista-icone-1024x533.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontawesome-lista-icone-300x156.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontawesome-lista-icone-768x400.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontawesome-lista-icone-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontawesome-lista-icone-1536x799.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontawesome-lista-icone.png 1775w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Uno dei principali vantaggi di Font Awesome \u00e8 la sua <strong>versatilit\u00e0 di integrazione<\/strong>. In WordPress pu\u00f2 essere utilizzata in diversi modi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>tramite il <strong>plugin ufficiale<\/strong>, che permette di caricare le icone senza toccare il codice;<\/li>\n\n\n\n<li>attraverso l\u2019uso dei <strong>kit<\/strong> forniti da Font Awesome, che consentono di gestire in maniera centralizzata le librerie e gli aggiornamenti;<\/li>\n\n\n\n<li>includendo manualmente i file CSS nel tema, una soluzione pi\u00f9 adatta a chi ha dimestichezza con il codice e preferisce avere un controllo totale.<\/li>\n<\/ul>\n\n\n\n<p>La gestione delle versioni \u00e8 un aspetto da considerare con attenzione. Molti temi e plugin WordPress includono gi\u00e0 una versione di Font Awesome e questo pu\u00f2 causare <strong>conflitti <\/strong>se se ne caricano di multiple. Per risolvere problemi di compatibilit\u00e0, il plugin ufficiale integra strumenti come il <strong><a href=\"https:\/\/docs.fontawesome.com\/web\/dig-deeper\/conflict-detection\" rel=\"noopener\">Conflict Detection<\/a><\/strong>, che avvisa in caso di versioni duplicate o librerie caricate pi\u00f9 volte.<\/p>\n\n\n\n<p>Dal punto di vista della personalizzazione, Font Awesome \u00e8 estremamente flessibile. Le icone possono essere ridimensionate, colorate e animate tramite CSS, oppure inserite inline come SVG per ottenere maggiore libert\u00e0 grafica. L\u2019unico limite \u00e8 che, trattandosi principalmente di font icona, le versioni tradizionali restano monocromatiche, anche se il supporto SVG permette di superare questa barriera.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"installare-il-plugin-in-font-awesome\">Installare il plugin in Font Awesome<\/h3>\n\n\n\n<p>Il plugin \u00e8 la <strong>strada pi\u00f9 semplice<\/strong>: aggiunge blocchi, shortcode e strumenti per gestire le icone senza toccare il codice, ed \u00e8 utile anche per intercettare e gestire conflitti di versione.<\/p>\n\n\n\n<p>Per installarlo dal backend di WordPress, vai su Plugin (1) e poi &#8220;Aggiungi plugin&#8221; (2). Cerca il plugin \u201cFont Awesome\u201d (3), clicca su &#8220;Installa ora&#8221; (4) e poi &#8220;Attiva&#8221;, e il plugin ufficiale sar\u00e0 pronto all&#8217;uso: nella versione gratuita non avrai bisogno di nessuna configurazione aggiuntiva.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"366\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/plugin-font-awesome-1024x366.png\" alt=\"Plugin Font Awesome\" class=\"wp-image-130610\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/plugin-font-awesome-1024x366.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/plugin-font-awesome-300x107.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/plugin-font-awesome-768x275.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/plugin-font-awesome-120x43.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/plugin-font-awesome-1536x549.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/plugin-font-awesome-2048x732.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo aver installato il plugin puoi inserire le icone su WordPress in tre modalit\u00e0 differenti, che adesso ti illustriamo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"come-inserire-le-icone-su-word-press-con-font-awesome\">Aggiungere icone WordPress tramite il blocco<\/h3>\n\n\n\n<p>Il plugin aggiunge ai blocchi standard di Gutenberg un <strong>blocco specifico per le proprie icone<\/strong>. Apri la pagina o l\u2019articolo e aggiungi un nuovo blocco cercando \u201cFont Awesome Icon\u201d (1). Dopo aver cliccato sul blocco per inserirlo (2) clicca su \u201cChoose Icon\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/inserire-icone-wordpress-font-awesome-1024x638.png\" alt=\"Inserire Icone WordPress Font Awesome\" class=\"wp-image-130611\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/inserire-icone-wordpress-font-awesome-1024x638.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/inserire-icone-wordpress-font-awesome-300x187.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/inserire-icone-wordpress-font-awesome-768x479.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/inserire-icone-wordpress-font-awesome-101x63.png 101w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/inserire-icone-wordpress-font-awesome-1536x958.png 1481w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/inserire-icone-wordpress-font-awesome.png 1482w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> Si aprir\u00e0 un popup all&#8217;interno del quale potrai cercare le tue icone WordPress per parola chiave oppure per tipologia, scegliendo fra <strong>brands, regular e solid<\/strong>. Nelle versioni a pagamento avrai a disposizione molti altri stili e filtri.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"404\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/lista-font-icone-wordpress-1024x404.png\" alt=\"Lista Font Icone WordPress\" class=\"wp-image-130612\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/lista-font-icone-wordpress-1024x404.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/lista-font-icone-wordpress-300x118.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/lista-font-icone-wordpress-768x303.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/lista-font-icone-wordpress-120x47.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/lista-font-icone-wordpress-1536x606.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/lista-font-icone-wordpress-2048x808.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Seleziona infine l&#8217;icona di tuo interesse, e procedi con le personalizzazioni. Per modificare <strong>colore, dimensioni, rotazione<\/strong> e aggiungere anche delle piccole <strong>animazioni <\/strong>dovrai cliccare sul pennello che comparir\u00e0 proprio sopra il blocco icona.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"653\" height=\"357\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/stile-icone-wordpress.png\" alt=\"Stile Icone WordPress\" class=\"wp-image-130614\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/stile-icone-wordpress.png 653w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/stile-icone-wordpress-300x164.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/stile-icone-wordpress-115x63.png 115w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/figure>\n\n\n\n<p>Fatto questo, un comodo popup ti consentir\u00e0 di personalizzare tutti questi aspetti e vederne l&#8217;anteprima. Terminata questa parte, nelle impostazioni generali di blocco disponibili nella colonna di destra potrai modificare <strong>spaziatura e margini<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"524\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/personalizzazione-font-icon-1024x524.png\" alt=\"Personalizzazione Font Icon\" class=\"wp-image-130613\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/personalizzazione-font-icon-1024x524.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/personalizzazione-font-icon-300x154.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/personalizzazione-font-icon-768x393.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/personalizzazione-font-icon-120x61.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/personalizzazione-font-icon-1536x787.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/personalizzazione-font-icon.png 1804w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>L&#8217;icona pu\u00f2 anche essere <strong>inserita all&#8217;interno di un testo<\/strong>, sia esso un titolo o un paragrafo.<\/p>\n\n\n\n<p>Dopo aver installato il plugin ti comparir\u00e0 il simbolo di un pennello nel pannello comandi del tuo blocco testo, da cui si aprir\u00e0 il medesimo pannello e potrai inserire il font icona di tuo interesse. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"191\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/testo-font-icon.png\" alt=\"Testo Font Icon\" class=\"wp-image-130617\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/testo-font-icon.png 844w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/testo-font-icon-300x68.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/testo-font-icon-768x174.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/testo-font-icon-120x27.png 120w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/figure>\n\n\n\n<p>Con un click sull&#8217;icona inserita (in questo caso la cornetta) avrai sempre la possibilit\u00e0 di cambiarla, oppure di accedere al popup delle personalizzazioni che abbiamo appena visto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"201\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/cambiare-icona-o-stile-icona.png\" alt=\"Cambiare Icona O Stile Icona\" class=\"wp-image-130618\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/cambiare-icona-o-stile-icona.png 658w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/cambiare-icona-o-stile-icona-300x92.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/cambiare-icona-o-stile-icona-120x37.png 120w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"utilizzare-gli-shortcode\">Utilizzare gli shortcode<\/h3>\n\n\n\n<p>Una volta installato il plugin puoi anche inserire l&#8217;icona in WordPress attraverso un blocco shortcode in cui andare a inserire le specifiche necessarie. Questo lo shortcode relativo alla cassa, l&#8217;esempio visto poco fa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;icon name=\"fa-solid fa-cash-register\" class=\"fa-2xl cash-register\"]<\/code><\/pre>\n\n\n\n<p>che apparir\u00e0 cos\u00ec:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"93\" height=\"87\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-con-shortcode.png\" alt=\"Icona Con Shortcode\" class=\"wp-image-131514\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-con-shortcode.png 93w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-con-shortcode-67x63.png 67w\" sizes=\"auto, (max-width: 93px) 100vw, 93px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/fontawesome.com\/search?q=cash&amp;o=r\" rel=\"noopener\">Qui hai l&#8217;elenco completo dei nomi icona<\/a> che puoi sostituire a &#8220;cash-register&#8221;. Oltre allo stile e alle dimensioni, puoi anche aggiungere dettagli sull&#8217;<strong>animazione<\/strong> desiderata. Per esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;icon name=\"cash-register\" prefix=\"fas\" class=\"fa-2x fa-spin\"]<\/code><\/pre>\n\n\n\n<p>In questo nuovo esempio il nostro registratore di cassa ha dimensione 2x (<a href=\"https:\/\/docs.fontawesome.com\/v5\/web\/style\/size\" rel=\"noopener\">a questo link tutte le classi di dimensione<\/a>) e ruota su se stesso (<a href=\"https:\/\/docs.fontawesome.com\/v5\/web\/style\/animate\" rel=\"noopener\">qui invece le classi di animazione<\/a>). Puoi anche specificare eventuali gradi di rotazione e di inversione a specchio, con le <a href=\"https:\/\/docs.fontawesome.com\/v5\/web\/style\/rotate\" rel=\"noopener\">relative classi<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"inserire-manualmente-le-icone-in-word-press\">Inserire manualmente le icone in WordPress<\/h3>\n\n\n\n<p>Se non vuoi installare plugin aggiuntivi, puoi comunque <strong>aggiungere icone a WordPress manualmente<\/strong>, cio\u00e8 collegando i file della libreria al tuo tema. Questo significa ospitare sul tuo server i file della libreria e dire a WordPress dove trovarli.<\/p>\n\n\n\n<p>In WordPress, il modo corretto per collegare fogli di stile e script \u00e8 usare l\u2019hook <code>wp_enqueue_scripts<\/code> nel file <code>functions.php<\/code> del <strong>tema attivo<\/strong> (idealmente un child theme).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/download-font-awesome-1024x416.png\" alt=\"Download Font Awesome\" class=\"wp-image-131684\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/download-font-awesome-1024x416.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/download-font-awesome-300x122.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/download-font-awesome-768x312.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/download-font-awesome-120x49.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/download-font-awesome-1536x625.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/download-font-awesome.png 1864w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Vai alla pagina di <a href=\"http:\/\/fontawesome.com\/download\" rel=\"noopener\">download di Font Awesome<\/a> e scarica il pacchetto <strong>Web<\/strong> (Free o Pro, in base alla tua licenza). All\u2019interno troverai sempre due cartelle chiave: <code>css<\/code> e <code>webfonts<\/code>. La prima contiene gli stili (ad es. <code>fontawesome.css<\/code>, <code>solid.css<\/code>, <code>brands.css<\/code>), la seconda i file dei font veri e propri (<code>.woff2<\/code>, <code>.woff<\/code>, ecc.).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"295\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/caricare-font-awesome-1024x295.png\" alt=\"Caricare Font Awesome\" class=\"wp-image-131685\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/caricare-font-awesome-1024x295.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/caricare-font-awesome-300x86.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/caricare-font-awesome-768x221.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/caricare-font-awesome-120x35.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/caricare-font-awesome-1536x443.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/caricare-font-awesome-2048x590.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Collega via File Manager di cPanel o SFTP e copia <strong>senza cambiare la struttura<\/strong> le cartelle <code>css<\/code> e <code>webfonts<\/code> dentro una directory del tuo tema, per esempio:<\/p>\n\n\n\n<p>\/wp-content\/themes\/generatepress\/font-awesome\/css\/<br>\/wp-content\/themes\/generatepress\/font-awesome\/webfonts\/<\/p>\n\n\n\n<p>Apri <code>functions.php<\/code> nel <strong>tema attivo<\/strong> e aggiungi questo blocco:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'wp_enqueue_scripts', function() {\n\n    $base    = 'font-awesome\/css';\n    $core    = $base . '\/fontawesome.css';\n    $solid   = $base . '\/solid.css';\n    $brands = $base . '\/brands.css';\n\n    $v = function($rel) {\n        $path = get_theme_file_path($rel);\n        return file_exists($path) ? filemtime($path) : null;\n    };\n\n\n    wp_enqueue_style('fa-core',  get_theme_file_uri($core),  &#091;], $v($core));\n    wp_enqueue_style('fa-solid', get_theme_file_uri($solid), &#091;'fa-core'], $v($solid));\n    wp_enqueue_style('fa-brands', get_theme_file_uri($brands), &#091;'fa-core'], $v($brands));\n});<\/code><\/pre>\n\n\n\n<p>Il file obbligatorio \u00e8 <code>fontawesome.css<\/code> ma nell&#8217;esempio abbiamo integrato anche con altri stili come \u201cSolid\u201d e  \u201cBrands\u201d. Usiamo <code>get_theme_file_uri()<\/code> cos\u00ec il codice funziona sia in child che in parent; per il versioning usiamo <code>filemtime()<\/code> in modo da azzerare la cache quando aggiorni i file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"313\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontawesome-file-functions-1024x313.png\" alt=\"Fontawesome File Functions\" class=\"wp-image-131686\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontawesome-file-functions-1024x313.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontawesome-file-functions-300x92.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontawesome-file-functions-768x235.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontawesome-file-functions-120x37.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontawesome-file-functions-1536x470.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontawesome-file-functions-2048x626.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Una volta caricati i CSS, puoi inserire le icone in qualsiasi blocco HTML. Con Font Awesome 6 Free, per esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;\n  &lt;i class=\"fa-solid fa-user\" aria-hidden=\"true\"&gt;&lt;\/i&gt;\n  &lt;span class=\"screen-reader-text\"&gt;Utente&lt;\/span&gt;\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>che si visualizzer\u00e0 cos\u00ec:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"130\" height=\"151\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-font-awesome-esempio.png\" alt=\"Icona Font Awesome Esempio\" class=\"wp-image-131687\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-font-awesome-esempio.png 130w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-font-awesome-esempio-54x63.png 54w\" sizes=\"auto, (max-width: 130px) 100vw, 130px\" \/><\/figure>\n\n\n\n<p>Piccola nota di attenzione: quando lavori all&#8217;editor del tema, assicurati sempre di aver installato un <strong>child theme<\/strong>, per non rischiare di perdere tutte le configurazioni inserite. Se non sai di cosa si tratta, ti invitiamo a leggere la nostra <a href=\"https:\/\/supporthost.com\/it\/tema-child\/\">guida dedicata al tema child<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dashicons\">Utilizzare Dashicons<\/h2>\n\n\n\n<p>All\u2019interno di WordPress esiste un set di icone preinstallato chiamato <strong><a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" rel=\"noopener\">Dashicons<\/a><\/strong>. Questo pacchetto \u00e8 stato introdotto per la prima volta nel 2013 e per anni ha rappresentato la libreria ufficiale di icone utilizzata dal core di WordPress, soprattutto nell\u2019area di amministrazione.<\/p>\n\n\n\n<p>Se hai mai dato un\u2019occhiata approfondita al <strong>backend <\/strong>di WordPress &#8211; ad esempio al menu laterale della bacheca &#8211; avrai sicuramente visto le Dashicons in azione: sono quelle che identificano, per esempio, le voci principali come \u201cArticoli\u201d, \u201cMedia\u201d o \u201cCommenti\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"262\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-icone-wordepress.png\" alt=\"Dashicons Icone Wordepress\" class=\"wp-image-130623\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-icone-wordepress.png 298w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-icone-wordepress-72x63.png 72w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/figure>\n\n\n\n<p>Dal punto di vista tecnico, Dashicons \u00e8 un <strong>font icona<\/strong>: un unico file contiene decine di simboli che possono essere richiamati tramite codice. Questo ha reso la libreria molto comoda da utilizzare per gli sviluppatori di temi e plugin, che potevano inserire icone coerenti con lo stile di WordPress senza ricorrere a librerie esterne.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"431\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicon-wordpress-1024x431.png\" alt=\"Dashicon WordPress\" class=\"wp-image-130602\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicon-wordpress-1024x431.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicon-wordpress-300x126.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicon-wordpress-768x323.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicon-wordpress-120x51.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicon-wordpress-1536x647.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicon-wordpress-2048x862.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Se per\u00f2 vuoi utilizzare queste icone anche nel <strong>frontend<\/strong> (cio\u00e8 nella parte pubblica del sito che vedono i visitatori), devi fare un piccolo passaggio per renderle disponibili al tema.<\/p>\n\n\n\n<p>Il metodo pi\u00f9 semplice consiste nell\u2019abilitare il caricamento delle Dashicons anche sul lato pubblico. Questo si fa modificando il file <code>functions.php<\/code> del tema o del tema child.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"428\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-file-functions-1024x428.png\" alt=\"Dashicons File Functions\" class=\"wp-image-130805\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-file-functions-1024x428.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-file-functions-300x125.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-file-functions-768x321.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-file-functions-120x50.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-file-functions-1536x642.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/dashicons-file-functions-2048x856.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per farlo vai nel backend ed entra nella sezione &#8220;Aspetto&#8221; (1); clicca su &#8220;Editor del tema&#8221; (2) e selezione il file <code>function.php<\/code> (3). Al fondo del contenuto inserisci la seguente riga di codice (4), che dice a WordPress di caricare la libreria Dashicons:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'wp_enqueue_scripts', function() {\n    wp_enqueue_style( 'dashicons' );\n});<\/code><\/pre>\n\n\n\n<p>Una volta fatto, puoi inserirle con una semplice classe HTML e controllarne l\u2019aspetto tramite CSS. Per esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=\"dashicons dashicons-star-filled\"&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>Qui la resa nel frontend:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"84\" height=\"87\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-dashicon-esempio.png\" alt=\"Icona Dashicon Esempio\" class=\"wp-image-131516\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-dashicon-esempio.png 84w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/icona-dashicon-esempio-61x63.png 61w\" sizes=\"auto, (max-width: 84px) 100vw, 84px\" \/><\/figure>\n\n\n\n<p>Tornando alle nostre icone, \u00e8 bene sapere che le Dashicons non sono pi\u00f9 al centro dello sviluppo della piattaforma. Dal 2020, infatti, il progetto \u00e8 stato <a href=\"https:\/\/make.wordpress.org\/design\/2020\/04\/20\/next-steps-for-dashicons\/\" rel=\"noopener\">ufficialmente messo in pausa<\/a>: <strong>non vengono aggiunte nuove icone e non \u00e8 pi\u00f9 possibile inviare richieste di aggiornamento<\/strong>. Le icone gi\u00e0 esistenti continuano a funzionare e rimangono disponibili in tutte le installazioni di WordPress, ma al momento non sono previste ulteriori novit\u00e0.<\/p>\n\n\n\n<p>Se stai creando un sito nuovo puoi ancora utilizzare Dashicons, ma conviene considerarle una <strong>soluzione limitata<\/strong>. Sono utili per garantire coerenza grafica nel backend o se vuoi mantenere uno stile leggero e uniforme con l\u2019interfaccia nativa di WordPress. Per applicazioni pi\u00f9 moderne e per il frontend, invece, \u00e8 consigliabile orientarsi su librerie pi\u00f9 aggiornate che offrono maggiore flessibilit\u00e0 e garantiscono compatibilit\u00e0 con gli standard futuri.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"material-icons-di-google\">Utilizzare Material Icons<\/h2>\n\n\n\n<p>Un\u2019altra libreria molto diffusa \u00e8 quella delle <strong><a href=\"https:\/\/fonts.google.com\/icons\" rel=\"noopener\">Material Icons<\/a><\/strong> sviluppata da Google. Queste icone fanno parte del progetto <a href=\"https:\/\/m3.material.io\/\" rel=\"noopener\">Material Design<\/a>, il linguaggio grafico introdotto dall\u2019azienda per uniformare l\u2019esperienza visiva tra app e siti web.<\/p>\n\n\n\n<p>Il set \u00e8 composto da centinaia di icone che coprono un ampio ventaglio di categorie: azioni comuni, simboli di navigazione, media player, strumenti di comunicazione, e molto altro ancora. L\u2019aspetto distintivo delle Material Icons \u00e8 la loro coerenza stilistica: linee semplici, spessori uniformi e un design minimalista che si integra facilmente con interfacce moderne.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/material-icons-1024x573.png\" alt=\"Material Icons\" class=\"wp-image-130806\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/material-icons-1024x573.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/material-icons-300x168.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/material-icons-768x430.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/material-icons-113x63.png 113w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/material-icons-1536x859.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/material-icons-2048x1146.png 1651w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/material-icons-scaled.png 1652w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dal punto di vista tecnico, queste icone possono essere utilizzate in pi\u00f9 varianti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>outlined<\/strong>: con tratti sottili e contorni evidenti;<\/li>\n\n\n\n<li><strong>filled<\/strong>: versioni piene, pi\u00f9 visibili e decise;<\/li>\n\n\n\n<li><strong>rounded<\/strong>: con angoli arrotondati, dall\u2019aspetto pi\u00f9 morbido;<\/li>\n\n\n\n<li><strong>sharp<\/strong>: con spigoli vivi e un carattere pi\u00f9 deciso;<\/li>\n\n\n\n<li><strong>Two Tones<\/strong>: icone con dettagli realizzati con due colori differenti.<\/li>\n<\/ul>\n\n\n\n<p>In WordPress le Material Icons possono essere integrate in modo simile ai <a href=\"https:\/\/supporthost.com\/it\/google-fonts\/\">Google Fonts<\/a>. Per utilizzarle, infatti, basta collegare il foglio di stile dal sito ufficiale e poi richiamare le icone tramite codice HTML. Il metodo \u00e8 lo stesso che abbiamo visto per Dashicons: nell&#8217;editor del tema, all&#8217;interno del file <code>function.php<\/code>, inseriamo questa riga: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'wp_enqueue_scripts', function() {\n    wp_enqueue_style(\n        'material-icons',\n        'https:\/\/fonts.googleapis.com\/icon?family=Material+Icons',\n        &#091;],\n        null\n    );\n});<\/code><\/pre>\n\n\n\n<p>Poi, dopo aver cliccato sull&#8217;icona di tuo interesse (1), copia dal sito Material Icons il codice da inserire nella tua pagina o articolo (2), e il gioco \u00e8 fatto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/seleziona-icona-material-icons-1024x467.png\" alt=\"Seleziona Icona Material Icons\" class=\"wp-image-131517\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/seleziona-icona-material-icons-1024x467.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/seleziona-icona-material-icons-300x137.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/seleziona-icona-material-icons-768x350.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/seleziona-icona-material-icons-120x55.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/seleziona-icona-material-icons-1536x701.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/seleziona-icona-material-icons.png 1916w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Copia quindi il codice su WordPress:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=\"material-icons\"&gt;delete&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>e questo sar\u00e0 il risultato:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"85\" height=\"96\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/esempio-material-icons.png\" alt=\"Esempio Material Icons\" class=\"wp-image-131518\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/esempio-material-icons.png 85w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/esempio-material-icons-56x63.png 56w\" sizes=\"auto, (max-width: 85px) 100vw, 85px\" \/><\/figure>\n\n\n\n<p>Le Material Icons hanno due punti di forza principali: la <strong>semplicit\u00e0 di utilizzo<\/strong> e la <strong>coerenza grafica<\/strong> con le linee guida di Google, che rendono questa libreria particolarmente adatta a chi vuole un sito con uno stile moderno e uniforme. Inoltre, come gli altri pacchetti, possono essere personalizzate facilmente tramite CSS per modificarne colore, dimensioni e posizione.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"configurare-un-set-di-font-icone-word-press-personalizzato\">Configurare un set di font icone WordPress personalizzato<\/h2>\n\n\n\n<p>Non sempre ha senso utilizzare un\u2019intera libreria di icone. Le librerie pi\u00f9 diffuse mettono a disposizione migliaia di simboli, ma nella maggior parte dei siti ne vengono impiegate poche decine.<\/p>\n\n\n\n<p>Per ovviare a questo problema \u00e8 possibile creare un <strong>set di font personalizzato<\/strong>, cio\u00e8 un pacchetto contenente soltanto le icone che si intende realmente usare. Esistono diversi strumenti online che permettono di farlo in pochi passaggi, tra cui <strong><a href=\"https:\/\/icomoon.io\/app\/\" rel=\"noopener\">IcoMoon App<\/a><\/strong>, <strong><a href=\"https:\/\/fontello.com\/\" rel=\"noopener\">Fontello<\/a><\/strong> e <strong><a href=\"http:\/\/Fontastic.me\" rel=\"noopener\">Fontastic.me<\/a><\/strong>. Il funzionamento \u00e8 simile: si selezionano le icone desiderate da una o pi\u00f9 librerie, si esporta il set generato e si ottengono i file necessari (font e CSS) da caricare sul proprio sito.<\/p>\n\n\n\n<p>Questa tecnica offre due vantaggi principali:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>il peso complessivo del sito si riduce perch\u00e9 il browser non deve pi\u00f9 scaricare migliaia di glifi inutilizzati;<\/li>\n\n\n\n<li>puoi <strong>combinare icone provenienti da font diversi<\/strong> in un unico pacchetto, creando cos\u00ec una libreria su misura. In questo modo puoi avere, ad esempio, alcune icone di Font Awesome affiancate a simboli minimali di altra provenienza, o da set personalizzati realizzati appositamente per il tuo brand.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"293\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/esempio-di-set-icon-font-1024x293.png\" alt=\"Esempio Di Set Icon Font\" class=\"wp-image-130814\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/esempio-di-set-icon-font-1024x293.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/esempio-di-set-icon-font-300x86.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/esempio-di-set-icon-font-768x220.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/esempio-di-set-icon-font-120x34.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/esempio-di-set-icon-font.png 1305w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Alla fine della selezione delle icone ti verr\u00e0 chiesto di scaricare un <strong>pacchetto compresso (.zip)<\/strong> che contiene di solito diversi file (come da screenshot qui sopra):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>una cartella con i <strong>file dei font<\/strong> (<code>.woff<\/code>, <code>.ttf<\/code>, <code>.svg<\/code>, <code>.eot<\/code>);<\/li>\n\n\n\n<li>un file <strong>CSS<\/strong> gi\u00e0 pronto che contiene le regole per visualizzare le icone;<\/li>\n\n\n\n<li>un file di esempio HTML con l\u2019elenco delle icone selezionate e le relative classi.<\/li>\n<\/ul>\n\n\n\n<p>A questo punto il flusso pratico \u00e8 lo stesso di qualunque altro icon font. Una volta estratti i file dovrai caricarli in una cartella del tuo tema (nel nostro esempio: <code>\/public_html\/wp-content\/themes\/twentytwentyfive\/fontello\/css\/fontello.css<\/code>), oppure in una directory apposita se si usa un child theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"248\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/ftp-pacchetto-icone-1024x248.png\" alt=\"Ftp Pacchetto Icone\" class=\"wp-image-131519\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/ftp-pacchetto-icone-1024x248.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/ftp-pacchetto-icone-300x73.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/ftp-pacchetto-icone-768x186.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/ftp-pacchetto-icone-120x29.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/ftp-pacchetto-icone-1536x372.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/ftp-pacchetto-icone-2048x496.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dovrai poi dire a WordPress di usare quel foglio di stile andando a inserire questa riga di codice nel file <code>functions.php<\/code> dopo l\u2019apertura <code>&lt;?php<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'wp_enqueue_scripts', function() {\n    $rel      = 'fontello\/css\/fontello.css';\n    $css_uri  = get_theme_file_uri( $rel );\n    $css_path = get_theme_file_path( $rel );\n\n    wp_enqueue_style(\n        'fontello-icons',\n        $css_uri,\n        &#091;],\n        file_exists( $css_path ) ? filemtime( $css_path ) : null\n    );\n});<\/code><\/pre>\n\n\n\n<p>Qui sotto lo screenshot espicativo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"284\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontello-aggiornamento-file-functions-1024x284.png\" alt=\"Fontello Aggiornamento File Functions\" class=\"wp-image-131682\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontello-aggiornamento-file-functions-1024x284.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontello-aggiornamento-file-functions-300x83.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontello-aggiornamento-file-functions-768x213.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontello-aggiornamento-file-functions-120x33.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontello-aggiornamento-file-functions-1536x426.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/fontello-aggiornamento-file-functions-2048x568.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Come potrai vedere nel file <code>demo.html<\/code> incluso nello zip scaricato da fontello ogni icona ha una classe CSS dedicata, generata dall\u2019applicazione.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"177\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontello-font-demo-1024x177.png\" alt=\"Fontello Font Demo\" class=\"wp-image-130815\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontello-font-demo-1024x177.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontello-font-demo-300x52.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontello-font-demo-768x133.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontello-font-demo-120x21.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontello-font-demo-1536x266.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/fontello-font-demo.png 1957w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ti baster\u00e0 <strong>copiare queste classi<\/strong> per mostrare l\u2019icona corrispondente. E quindi, ad esempio, con questo codice:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i class=\"icon-emo-happy\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n\n<p>otterrai questo risultato:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"537\" height=\"190\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/prova-icona-fontello.png\" alt=\"Prova Icona Fontello\" class=\"wp-image-131680\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/prova-icona-fontello.png 537w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/prova-icona-fontello-300x106.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/09\/prova-icona-fontello-120x42.png 120w\" sizes=\"auto, (max-width: 537px) 100vw, 537px\" \/><\/figure>\n\n\n\n<p>In definitiva, configurare un set di font personalizzato rappresenta un passaggio importante per chi desidera un <strong>sito veloce e ottimizzato<\/strong>. Richiede un minimo di lavoro iniziale, ma i benefici in termini di performance e ordine nella gestione delle icone ripagano ampiamente lo sforzo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"errori-da-evitare\">Errori da evitare<\/h2>\n\n\n\n<p>L\u2019uso degli icon font in WordPress \u00e8 relativamente semplice, ma esistono alcuni errori molto diffusi che possono compromettere la resa grafica, la velocit\u00e0 del sito e perfino l\u2019esperienza degli utenti. Conoscerli in anticipo aiuta a evitarli e a sfruttare al meglio i vantaggi offerti da questo strumento.<\/p>\n\n\n\n<p>Uno degli sbagli pi\u00f9 frequenti lo abbiamo gi\u00e0 accennato poco fa, e cio\u00e8 <strong>caricare l\u2019intero pacchetto di icone WordPress quando se ne usano solo poche<\/strong>. Questo significa appesantire inutilmente le pagine e allungare inutilmente i tempi di caricamento.<\/p>\n\n\n\n<p>Un altro errore comune \u00e8 <strong>caricare pi\u00f9 versioni della stessa libreria<\/strong>. Succede quando il tema include gi\u00e0 Font Awesome, ma si installa anche un plugin che integra la stessa libreria in un\u2019altra versione. Questo porta a conflitti di codice: alcune icone potrebbero non essere visualizzate correttamente, oppure comparire simboli diversi da quelli attesi. Prima di aggiungere nuovi plugin, \u00e8 sempre utile controllare se il tema o altri componenti hanno gi\u00e0 predisposto un icon font e in quale versione.<\/p>\n\n\n\n<p>C\u2019\u00e8 poi il rischio di <strong>trascurare l\u2019accessibilit\u00e0<\/strong>, pericolo che con le icone SVG non si corre. Un\u2019icona usata soltanto a scopo decorativo, se non contrassegnata con l\u2019attributo <code>aria-hidden=\"true\"<\/code>, rischia di essere letta dai lettori di schermo come un contenuto privo di senso, generando confusione.<\/p>\n\n\n\n<p>Facciamo un esempio di applicazione utilizzando Font Awesome: se abbiamo inserito un\u2019icona di abbellimento &#8211; ad esempio un cuoricino accanto a un titolo &#8211; dovremo nasconderla <strong>per non mandare in confusione gli screen reader<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;\n  &lt;i class=\"fa-solid fa-heart\" aria-hidden=\"true\"&gt;&lt;\/i&gt; \n  Le nostre offerte\n&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<p>Allo stesso modo, un\u2019icona con funzione informativa deve sempre essere accompagnata da un testo alternativo o da una label esplicativa. Se per esempio abbiamo un\u2019icona email per inviare un messaggio di posta elettronica, bisogna fornire un <strong>testo alternativo nascosto<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"mailto:info@tuosito.it\" class=\"icon-link\"&gt;\n  &lt;i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"&gt;&lt;\/i&gt;\n  &lt;span class=\"sr-only\"&gt;Invia una email a info@tuosito.it&lt;\/span&gt;\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Ignorare questo aspetto significa rendere il sito meno inclusivo e pi\u00f9 difficile da navigare per chi utilizza tecnologie assistive.<\/p>\n\n\n\n<p>Un ultimo errore da non sottovalutare \u00e8 quello di <strong>non aggiornare le librerie<\/strong>. Gli icon font, come qualsiasi altro componente software, possono contenere vulnerabilit\u00e0 di sicurezza. Utilizzare versioni obsolete espone il sito a possibili attacchi, oltre a limitare l\u2019accesso alle nuove icone introdotte. Tenere aggiornati tema, plugin e librerie esterne \u00e8 una buona prassi che vale anche per gli icon font.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>Le icone rappresentano un <strong>elemento ormai imprescindibile nel web design moderno<\/strong>: aiutano a rendere le interfacce pi\u00f9 chiare, intuitive e immediate, guidando l\u2019utente tra pulsanti, menu e call to action. E se utilizzate in maniera consapevole, le icone non sono semplicemente ornamenti visivi, ma <strong>strumenti concreti<\/strong> per migliorare la comunicazione e l\u2019efficacia del tuo sito WordPress.<\/p>\n\n\n\n<p>Hai gi\u00e0 provato a inserire icon font nel tuo sito? E se s\u00ec, quale metodo hai utilizzato? Condividi la tua esperienza nei commenti: pu\u00f2 essere utile a chi sta valutando ora la soluzione migliore per il proprio progetto!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le icone WordPress sono diventate negli ultimi anni uno degli elementi grafici pi\u00f9 utilizzati nella progettazione di siti web. Non si tratta solo di dettagli estetici: un\u2019icona ben scelta e posizionata al posto giusto migliora la leggibilit\u00e0 dei contenuti, rende pi\u00f9 immediata la navigazione e aiuta l\u2019utente a orientarsi, contribuendo in modo diretto alla user [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":132374,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-130587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/130587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=130587"}],"version-history":[{"count":38,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/130587\/revisions"}],"predecessor-version":[{"id":133501,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/130587\/revisions\/133501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/132374"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=130587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=130587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=130587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}