Come aggiungere facilmente font icona nel tuo tema WordPress

Quando vediamo siti WordPress che utilizzano normali file immagine per le loro icone, non possiamo fare a meno di pensare che si stiano perdendo qualcosa di meglio.

Questo perché i font icona sono la scelta più intelligente: si caricano più velocemente, appaiono più nitidi su qualsiasi schermo e puoi cambiarne facilmente le dimensioni o il colore con pochi clic.

Molti proprietari di siti web utilizzano ancora icone immagine obsolete perché non hanno sentito parlare delle opzioni più semplici disponibili. Grazie ai moderni font icona, ora puoi aggiungere icone dall'aspetto accattivante al tuo sito senza rallentarlo.

In questa guida, ti mostreremo i modi più semplici per aggiungere font icona al tuo tema WordPress. Abbiamo testato personalmente questi metodi e funzionano benissimo con qualsiasi tema tu possa utilizzare.

Cosa sono i font icona e perché dovresti usarli?

I font icona contengono simboli o piccole immagini invece di lettere e numeri.

Puoi utilizzare questi font icona in molti modi diversi. Ad esempio, puoi usarli con il tuo carrello della spesa, i pulsanti di download, caselle di funzionalità, concorsi a premi e persino menu di navigazione di WordPress.

Infatti, WordPress utilizza font icona nella sua area di amministrazione.

La maggior parte dei visitatori capirà immediatamente cosa significa un'icona comunemente usata, in modo che possano rendere il tuo sito più facile da navigare. Possono anche aiutarti a creare un sito web multilingue poiché la maggior parte delle persone capirà i font icona comuni indipendentemente dalla lingua parlata.

Rispetto alle icone basate su immagini, le icone font si caricano molto più velocemente, quindi possono aumentare la velocità e le prestazioni di WordPress.

Esistono diversi set di font icona open-source che puoi usare gratuitamente, ma in questa guida utilizzeremo Font Awesome poiché è il set di icone open-source più popolare.

Detto questo, vediamo come puoi aggiungere facilmente font icona al tuo tema WordPress. Usa semplicemente i collegamenti rapidi per passare direttamente al metodo che desideri utilizzare:

• Metodo 1. Aggiungere font icona utilizzando un plugin WordPress (gratuito e facile)
• Method 2. Using Icon Fonts with SeedProd (More Customizable)

Metodo 1. Aggiungere font icona utilizzando un plugin WordPress (gratuito e facile)

Il modo più semplice per aggiungere font icona personalizzati a WordPress è utilizzare il plugin Font Awesome.

Questo plugin ti consente di utilizzare font icona gratuiti nelle tue pagine e nei tuoi post senza modificare i file del tuo tema WordPress. Riceverai anche tutte le nuove icone di Font Awesome automaticamente ogni volta che aggiorni il plugin.

La prima cosa che devi fare è aggiungere Font Awesome a WordPress. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, puoi aggiungere un'icona Font Awesome a qualsiasi blocco shortcode. Apri semplicemente la pagina o il post in cui desideri mostrare il font icona, quindi fai clic sull'icona '+'.

Ora puoi cercare 'Shortcode' e selezionare il blocco giusto quando appare.

Fatto ciò, puoi aggiungere qualsiasi icona Font Awesome usando il seguente shortcode:

[icon name="rocket"]

Sostituisci semplicemente "rocket" con il nome dell'icona che desideri mostrare. Per ottenere il nome, vai alla libreria Font Awesome e fai clic sull'icona che desideri utilizzare.

Nel popup che appare, fai clic sull'icona.

Font Awesome copierà ora automaticamente il nome negli appunti.

Fatto ciò, incolla semplicemente il nome nello shortcode. Ora puoi fare clic su 'Pubblica' o 'Aggiorna' per rendere attiva l'icona del font.

A volte, potresti voler mostrare un font icona all'interno di un blocco di testo. Ad esempio, potresti dover visualizzare un simbolo di 'copyright' dopo un nome di marchio.

Per fare ciò, incolla semplicemente lo shortcode all'interno di qualsiasi blocco Paragrafo.

Puoi quindi utilizzare le impostazioni nel menu a destra per personalizzare l'icona, in modo simile a come personalizzi le opzioni per i blocchi di testo. Ad esempio, puoi cambiare il colore del testo, la dimensione del font e il colore di sfondo in WordPress.

WordPress trasformerà lo shortcode in un'icona Font Awesome e la mostrerà accanto al tuo testo.

Un'altra opzione è aggiungere lo shortcode a qualsiasi area pronta per i widget.

Ad esempio, puoi aggiungere un blocco Shortcode alla barra laterale del tuo sito o a una sezione simile.

Per maggiori informazioni, consulta la nostra guida su come utilizzare gli shortcode nei widget della barra laterale di WordPress.

Puoi persino aggiungere lo shortcode dell'icona alle colonne e creare bellissime caselle di funzionalità.

Per istruzioni dettagliate, consulta la nostra guida su come aggiungere caselle di funzionalità con icone in WordPress.

Molti siti web utilizzano font icona nei loro menu, per aiutare i visitatori a orientarsi. Per aggiungere un'icona, crea un nuovo menu o apri un menu esistente nella dashboard di WordPress.

Per istruzioni passo-passo, consulta la nostra guida per principianti su come aggiungere un menu di navigazione in WordPress.

Nella pagina Aspetto » Menu , fai clic su ‘Opzioni schermo’ e quindi seleziona la casella accanto a ‘Classi CSS’.

Fatto ciò, fai semplicemente clic per espandere la voce di menu in cui desideri visualizzare l'icona.

Ora dovresti vedere un nuovo campo ‘Classi CSS’.

Per ottenere la classe CSS di un'icona, trova semplicemente il font dell'icona sul sito web di Font Awesome e fai clic su di esso. Se lo desideri, puoi quindi modificare lo stile dell'icona facendo clic sulle diverse impostazioni.

Nel popup, vedrai uno snippet di codice HTML. La classe CSS è semplicemente il testo tra le virgolette. Ad esempio, nell'immagine seguente, la classe CSS è fa-solid fa-address-book.

Copia semplicemente il testo all'interno delle virgolette, quindi torna alla dashboard di WordPress.

Ora puoi incollare il testo nel campo ‘Classi CSS’.

Per aggiungere altri font di icone, segui semplicemente lo stesso processo descritto sopra.

Quando sei soddisfatto di come è impostato il menu, fai clic su ‘Salva’. Ora, se visiti il tuo sito web WordPress, vedrai il menu di navigazione aggiornato.

Metodo 2. Utilizzo di font di icone con SeedProd (più personalizzabile)

Se desideri la libertà di utilizzare icone font ovunque sul tuo sito, ti consigliamo di utilizzare un plugin per page builder.

SeedProd è il miglior page builder drag-and-drop per WordPress sul mercato e ha oltre 1400 icone Font Awesome integrate. Ha anche un blocco Icone pronto all'uso che puoi aggiungere a qualsiasi pagina tramite drag and drop.

Diversi dei nostri brand partner hanno creato interi siti web utilizzandolo e hanno avuto ottime esperienze. Per maggiori dettagli, consulta la nostra recensione di SeedProd.

La prima cosa da fare è installare e attivare il plugin. Per maggiori dettagli, consulta la nostra guida per principianti su come installare un plugin per WordPress.

Dopo l'attivazione, vai su SeedProd » Impostazioni e inserisci la tua chiave di licenza.

Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd. Dopo aver inserito la chiave di licenza, fai clic sul pulsante ‘Verifica chiave’.

Successivamente, devi visitare SeedProd » Pagine e fare clic sul pulsante ‘Aggiungi nuova landing page’.

Ora puoi scegliere un modello da usare come base per la tua pagina. SeedProd ha oltre 350+ modelli progettati professionalmente che puoi personalizzare in base alle esigenze del tuo blog o sito web WordPress.

Ad esempio, puoi creare una landing page virale per la lista d'attesa, una squeeze page o persino una pagina di errore 404 personalizzata per mantenere gli utenti coinvolti.

Per selezionare un modello, passaci sopra il mouse e fai clic sull'icona a forma di 'Spunta'.

Stiamo usando il modello 'Pagina di vendita ebook' in tutte le nostre immagini, poiché è perfetto per vendere prodotti digitali. Tuttavia, puoi usare qualsiasi design desideri.

Successivamente, procedi a digitare un nome per la pagina personalizzata. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma puoi modificare questo URL come preferisci.

Quando sei soddisfatto delle informazioni inserite, fai clic sul pulsante 'Salva e inizia a modificare la pagina'.

Successivamente, verrai portato all'editor drag-and-drop di SeedProd, dove potrai personalizzare il modello.

L'editor di SeedProd mostra un anteprima live del tuo design sulla destra e alcune impostazioni dei blocchi sulla sinistra.

Il menu di sinistra contiene anche blocchi che puoi trascinare sul tuo design.

Puoi trascinare e rilasciare blocchi standard come pulsanti e immagini o utilizzare blocchi avanzati come il modulo di contatto, il conto alla rovescia, i pulsanti di condivisione sui social media e altro ancora.

Per personalizzare qualsiasi blocco, fai semplicemente clic per selezionarlo nel tuo layout.

Il menu a sinistra mostrerà ora tutte le impostazioni che puoi utilizzare per personalizzare quel blocco. Ad esempio, puoi spesso cambiare i colori di sfondo, aggiungere immagini di sfondo o cambiare lo schema di colori e i font per adattarli meglio al tuo brand.

Per aggiungere un'icona font alla pagina, trova semplicemente il blocco 'Icona' nella colonna di sinistra e trascinalo sul tuo layout.

SeedProd mostrerà un'icona a 'freccia' per impostazione predefinita.

Per mostrare invece un'icona Font Awesome diversa, fai semplicemente clic per selezionare il blocco Icona.

Nel menu a sinistra, passa il mouse sopra l'icona e quindi fai clic sul pulsante 'Libreria Icone' quando appare.

Ora vedrai tutte le diverse icone Font Awesome tra cui puoi scegliere.

Trova semplicemente l'icona font che desideri utilizzare e fai clic su di essa.

SeedProd aggiungerà ora l'icona al tuo layout.

Dopo aver scelto un'icona, puoi cambiarne l'allineamento, il colore e le dimensioni utilizzando le impostazioni nel menu a sinistra.

Puoi anche aggiungere un link all'icona font, digitando nel campo 'Link' nel menu a sinistra.

Un'altra opzione è utilizzare la casella Icona di SeedProd, già pronta.

Questo ti permette di digitare del testo e poi mostrare un'icona font accanto ad esso, il che la rende un'ottima scelta per le caselle delle funzionalità.

Trova semplicemente la Casella Icona nel menu a sinistra e trascinala sul tuo layout.

Puoi quindi fare clic per selezionare il blocco e cambiare l'icona seguendo lo stesso processo descritto sopra.

Dopodiché, puoi digitare il testo dell'intestazione e del corpo.

Puoi anche cambiare il padding e il margine del blocco, aggiungere animazioni CSS e altro ancora selezionando la scheda 'Avanzate'.

Puoi continuare a lavorare sulla pagina aggiungendo altri blocchi e personalizzando tali blocchi nel menu a sinistra.

Quando sei soddisfatto dell'aspetto della pagina, fai clic sul pulsante ‘Save’. Puoi quindi selezionare ‘Publish’ per rendere la pagina live.

Alternativa: Usa icone SVG

Un altro modo per aggiungere immagini icona a WordPress è utilizzare le icone SVG. Acronimo di scalable vector format, è un formato di immagine comunemente utilizzato per la grafica vettoriale.

Molte persone utilizzano icone vettoriali SVG anziché font icona quando desiderano aggiungere più colori alle proprie icone. Questi file sono anche noti per essere più SEO-friendly e richiedono meno richieste al server per il caricamento rispetto ad altre icone immagine.

Se desideri saperne di più su SVG, puoi consultare la nostra guida passo passo su come aggiungere file immagine SVG in WordPress.

Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere font icona al tuo tema WordPress. Puoi anche consultare la nostra guida sui migliori costruttori di temi WordPress e come cambiare i font nel tuo tema WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.