Come usare i font icona nell'editor dei post di WordPress (senza codice)

Vuoi usare i font icona nell'editor dei post di WordPress?

I font icona ti permettono di usare facilmente immagini e simboli nel testo. Sono leggeri e non rallenteranno il tuo sito, e possono essere facilmente scalati a qualsiasi dimensione e stilizzati come qualsiasi altro font di testo.

In questo articolo, ti mostreremo come usare facilmente i font icona nell'editor dei post di WordPress senza scrivere alcun codice HTML.

Ti mostreremo diversi metodi, ognuno dei quali utilizza un approccio leggermente diverso dall'altro. Puoi scegliere quello che funziona meglio per te.

Metodo 1. Aggiungere font icona nell'editor dei post di WordPress usando JVM Rich Text Icons

Questo metodo è consigliato per qualsiasi tipo di sito web WordPress. È facile da usare e funziona perfettamente con l'editor a blocchi.

Innanzitutto, devi installare e attivare il plugin JVM Rich Text Icons. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, puoi semplicemente modificare un post o pagina di WordPress o crearne uno nuovo. All'interno dell'editor dei post, aggiungi un nuovo blocco paragrafo e vedrai una nuova icona a forma di bandiera nella barra degli strumenti del blocco.

Cliccandoci sopra, verrà visualizzato un popup di icone tra cui scegliere. Per impostazione predefinita, utilizza i popolari font di icone Font Awesome.

Puoi usare la ricerca per cercare un'icona o semplicemente scorrere verso il basso per trovare l'icona che desideri, quindi fare clic per aggiungerla.

Un vantaggio dell'utilizzo dei font di icone è che puoi usare CSS per stilizzarli.

Tuttavia, poiché stai già utilizzando l'editor a blocchi, puoi semplicemente utilizzare gli strumenti di colore integrati per stilizzare le icone.

Il plugin ti consente di utilizzare font di icone nella maggior parte dei blocchi di testo come Paragrafo, Elenco, Pulsante, Colonne, Copertina e altro.

Ecco un esempio di utilizzo di font di icone e opzioni di blocco per stilizzare tre colonne.

Un altro utile esempio di utilizzo dei font di icone è con i pulsanti.

Questa volta stiamo utilizzando font di icone inline insieme ad alcuni testi per i due pulsanti.

Sentiti libero di utilizzare gli strumenti dell'editor a blocchi come allineamento del testo, colori, spaziatura e altro per ottenere il massimo dai font di icone.

Metodo 2. Aggiungere font di icone nell'editor dei post di WordPress con Font Awesome

Questo metodo richiede di aggiungere shortcode nell'editor dei post per visualizzare i font di icone. Puoi utilizzare questo metodo se non hai bisogno di utilizzare regolarmente font di icone nei tuoi post e pagine di WordPress.

Innanzitutto, devi installare e attivare il plugin Font Awesome. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, puoi modificare un post o una pagina in WordPress e utilizzare il seguente shortcode per aggiungere un'icona font.

[icon name="home"]

Il parametro name qui è il nome del font utilizzato da Font Awesome. Puoi trovare l'elenco completo sulla pagina Font Awesome cheatsheet.

Una volta aggiunto, puoi visualizzare in anteprima il tuo post o la tua pagina per vedere come apparirà l'icona sul sito live, poiché non verrà visualizzata come icona nell'editor a blocchi.

Questo è come appariva sul nostro sito di prova.

Puoi usare lo shortcode all'interno di un paragrafo e in linea con altro testo. Puoi anche aggiungerlo da solo usando il blocco 'Shortcode'.

Tuttavia, l'uso del blocco 'Shortcode' non ti darà le opzioni di stile che otterrai con altri blocchi di testo.

Puoi anche aggiungere lo shortcode all'interno delle colonne per creare una riga di funzionalità.

Sarebbe un po' più complicato poiché non sarai in grado di vedere le immagini effettive e le altezze delle colonne continueranno a cambiare nell'editor.

Ecco come appariva sul nostro sito di prova. Le colonne hanno la stessa altezza, anche se non lo sono nell'editor.

Probabilmente dovrai visualizzare in anteprima il tuo lavoro in una nuova scheda del browser molte volte per vedere come apparirà agli utenti.

Metodo 3. Utilizzo di Icon Fonts con Page Builder di WordPress

Questo metodo è ottimo se stai creando una landing page o progettando il tuo sito web utilizzando un page builder di WordPress come SeedProd.

SeedProd è il miglior page builder di WordPress sul mercato. Ti consente di creare facilmente landing page straordinarie o progettare un tema completo per il tuo sito web.

Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, ti verrà chiesto di inserire la chiave di licenza del tuo plugin. Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd.

Dopo aver inserito la chiave di licenza e cliccato su 'Verifica chiave', puoi iniziare a lavorare sulla tua landing page.

Vai semplicemente alla pagina SeedProd » Landing Pages e fai clic sul pulsante 'Aggiungi nuova landing page'.

Dopodiché, ti verrà chiesto di scegliere un modello per la tua landing page.

SeedProd offre una serie di bellissimi design di landing page che puoi usare come punto di partenza, oppure puoi iniziare con un modello vuoto e progettare tutto da solo.

Per questo tutorial, utilizzeremo un modello predefinito. Fai semplicemente clic su un modello per selezionarlo e continuare.

Successivamente, ti verrà chiesto di fornire un titolo per la tua landing page e di scegliere un URL.

Dopo averli inseriti, fai clic sul pulsante ‘Salva e inizia a modificare la pagina’ per continuare.

SeedProd avvierà ora l'interfaccia del page builder. È uno strumento di progettazione drag-and-drop in cui puoi semplicemente puntare e fare clic su qualsiasi elemento per modificarlo.

Puoi anche trascinare e rilasciare blocchi dalla colonna di sinistra per aggiungere nuovi elementi al tuo design.

Ai fini di questo tutorial, aggiungeremo il blocco Icona.

Dopo aver aggiunto il blocco, puoi semplicemente fare clic per modificarne le proprietà.

La colonna di sinistra cambierà per mostrare le opzioni per il blocco Icona. Puoi fare clic nella sezione ‘Icona’ a sinistra e scegliere un'immagine icona diversa o cambiare il colore e lo stile.

Un altro modo per utilizzare le icone in SeedProd è aggiungendo il blocco ‘Icon Box’.

La differenza tra questo e il blocco ‘Icona’ che abbiamo usato in precedenza è che ‘Icon Box’ ti permette di aggiungere testo insieme all'icona scelta.

Questo è uno dei modi più comuni per utilizzare le icone quando si visualizzano le funzionalità dei prodotti, i servizi e altri elementi.

Puoi posizionare la tua icon box all'interno di colonne, scegliere i colori e regolare le dimensioni dell'icona a tuo piacimento.

Inoltre, puoi anche formattare il testo di accompagnamento utilizzando la barra degli strumenti di formattazione di SeedProd.

Una volta terminata la modifica della pagina, non dimenticare di fare clic sul pulsante ‘Salva’ nell'angolo in alto a destra dello schermo.

Se sei pronto, puoi fare clic su 'Pubblica' per rendere la pagina live, oppure puoi fare clic su 'Anteprima' per assicurarti che appaia come desideri.

Puoi anche fare clic su 'Salva come modello' in modo da poter riutilizzare questo design con SeedProd in altre parti del tuo sito web.

Ecco come apparivano i font icona sul nostro sito web di test.

Speriamo che questo articolo ti abbia aiutato a imparare come utilizzare i font icona nell'editor dei post di WordPress senza scrivere codice HTML. Potresti anche voler consultare la nostra guida alle prestazioni di WordPress per ottimizzare la velocità del tuo sito web o i migliori plugin per landing page per WordPress.

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