Come aggiungere facilmente i caratteri icona nel tema WordPress

Vuoi aggiungere caratteri icona sul tuo sito WordPress? Recentemente uno dei nostri lettori ha chiesto qual è il modo più semplice per aggiungere caratteri icona nel loro tema WordPress?


I caratteri icona ti consentono di aggiungere icone vettoriali (ridimensionabili) senza rallentare il tuo sito web. Sono caricati come caratteri web e possono essere definiti in stile CSS.

In questo articolo, ti mostreremo come aggiungere facilmente i caratteri icona nel tuo tema WordPress, passo dopo passo.

Utilizzo di caratteri icona con qualsiasi tema WordPress

Quali sono i caratteri icona e perché dovresti usarli?

I caratteri icona contengono simboli o pittogrammi anziché lettere e numeri. Questi pittogrammi possono essere facilmente aggiunti al contenuto del sito Web e ridimensionati tramite CSS. Rispetto alle icone basate su immagini, le icone dei caratteri sono molto più veloci, il che aiuta con la velocità complessiva del tuo sito Web WordPress.

Anteprima font icona

I caratteri icona possono essere usati per visualizzare icone comunemente usate. Ad esempio, puoi usarli con il carrello della spesa, i pulsanti di download, le caselle delle funzioni, il concorso omaggio e persino nei menu di navigazione di WordPress.

Ci sono molti font gratuiti e open source disponibili con centinaia di bellissime icone.

In effetti, ogni installazione di WordPress viene fornita con il set di caratteri icona dashboard gratuiti. Queste icone sono utilizzate nel menu di amministrazione di WordPress e in altre aree all’interno dell’area di amministrazione di WordPress.

Alcuni altri caratteri icona popolari sono:

  • Carattere fantastico
  • Genericons
  • IcoMoon
  • Linearicons
  • Material Icons di Google
  • Il progetto Noun

Per il bene di questo tutorial, useremo Font Awesome. È il font icona gratuito e open source più popolare disponibile. Usiamo FontAwesome sul sito Web WPBeginner e sui nostri plugin WordPress come OptinMonster, WPForms, RafflePress, ecc..

In questa guida tratteremo tre modi per aggiungere caratteri icona in WordPress. Puoi scegliere la soluzione che funziona meglio per te.

Aggiunta di font icona in WordPress tramite plugin

Se sei un utente di livello principiante, stai solo cercando di aggiungere alcune icone ai tuoi post o alle tue pagine, quindi questo metodo è adatto a te. Non dovresti modificare i file dei temi e sarai in grado di utilizzare i caratteri icona ovunque sul tuo sito web.

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

All’attivazione, il plugin abilita il supporto di Font Awesome per il tuo tema. Ora puoi modificare qualsiasi post o pagina di WordPress e utilizzare lo shortcode dell’icona in questo modo:

È possibile utilizzare questo shortcode insieme ad altro testo o da solo in un blocco shortcode dedicato.

Aggiunta dello shortcode del font icona in WordPress

Una volta aggiunto, puoi visualizzare l’anteprima del tuo post o pagina per vedere come apparirà l’icona su un sito live. Ecco come appariva sul nostro sito di test.

Anteprima dell'icona

Puoi anche aggiungere lo shortcode dell’icona del carattere all’interno di un blocco di paragrafi da solo, dove puoi utilizzare le impostazioni del blocco per aumentare le dimensioni dell’icona.

Aumenta la dimensione dell'icona

Man mano che aumenti la dimensione del testo, questo potrebbe apparire strano nell’editor di testo. Questo perché lo shortcode non si trasforma automaticamente in un carattere icona all’interno dell’editor del blocco.

Dovrai fare clic sul pulsante di anteprima sul tuo post o pagina per vedere come apparirebbe la dimensione effettiva dell’icona.

Carattere icona ingrandito

Puoi anche usare l’icona shortcode all’interno delle colonne e creare caselle di funzioni come questa:

Utilizzo dei caratteri icona nelle caselle funzioni

2. Utilizzo dei caratteri icona con un generatore di pagine WordPress

I plug-in del generatore di pagine WordPress più diffusi sono dotati di supporto integrato per i caratteri icona. Ciò consente di utilizzare facilmente i caratteri icona nelle pagine di destinazione e in altre aree del sito Web.

Beaver Builder

Beaver Builder è il miglior plug-in per la creazione di pagine WordPress sul mercato. Ti consente di creare facilmente layout di pagina personalizzati in WordPress senza scrivere alcun codice.

Beaver Builder viene fornito con bellissime icone e moduli pronti all’uso che puoi semplicemente trascinare e rilasciare nei tuoi post e pagine.

Moduli icona Beaver Builder

È possibile creare gruppi di icone, aggiungere una singola icona e spostarli in righe e colonne ben posizionate. Puoi anche selezionare i tuoi colori, sfondo, spaziatura e margine senza scrivere CSS.

Modifica i caratteri icona in Beaver Builder

Puoi persino creare temi WordPress completamente personalizzati senza scrivere alcun codice utilizzando il prodotto Themer di Beaver Builder.

Elementor Pro

Elementor è un altro popolare plugin per la creazione di pagine di WordPress. Viene inoltre fornito con diversi elementi che consentono di utilizzare i caratteri icona, incluso un elemento Icona.

Icona elementare

Puoi semplicemente trascinare e rilasciare un’icona ovunque e usarla con righe, colonne e tabelle per creare splendide pagine.

Anche altri generatori di pagine popolari come Divi e Visual Composer hanno pieno supporto per i caratteri icona.

3. Aggiunta manuale di font icona in WordPress con codice

Come accennato in precedenza, i caratteri icona sono solo caratteri e possono essere aggiunti al tuo sito come se aggiungessi caratteri personalizzati.

Alcuni caratteri icona come Font Awesome, sono disponibili dai server CDN sul Web e possono essere collegati direttamente dal tema WordPress.

Puoi anche caricare l’intera directory dei caratteri in una cartella nel tuo tema WordPress e quindi utilizzare quei caratteri nel tuo foglio di stile.

Poiché stiamo usando Font Awesome per questo tutorial, ti mostreremo come puoi aggiungerlo usando entrambi i metodi.

Metodo 1:

Questo metodo manuale è abbastanza semplice.

Innanzitutto, devi visitare il sito Web Font Awesome e inserire il tuo indirizzo e-mail per ottenere il codice di incorporamento.

Ottieni font Codice di incorporamento eccezionale

Ora controlla nella tua casella di posta elettronica un’email da Font Awesome con il tuo codice di incorporamento. Copia e incolla questo codice di incorporamento nel file header.php del tuo tema WordPress appena prima del tag.

Il tuo codice di incorporamento sarà una singola riga che recupererà la libreria Font Awesome direttamente dai loro server CDN. Sarà simile a questo:

Questo metodo è più semplice, ma può causare conflitti con altri plugin.

Un approccio migliore sarebbe quello di caricare correttamente JavaScript in WordPress utilizzando il meccanismo di accodamento incorporato.

Invece di collegarti al foglio di stile dal modello di intestazione del tuo tema, puoi aggiungere il seguente codice nel file Functions.php del tuo tema o in un plug-in specifico del sito.

funzione wpb_load_fa () {

wp_enqueue_script (‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array (), ‘1.0.0’, true);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

Metodo 2:

Il secondo metodo non è il più semplice, ma ti permetterebbe di ospitare i caratteri icona Font Awesome sul tuo sito web.

Per prima cosa, devi visitare il sito Web Font Awesome per scaricare il pacchetto di font sul tuo computer.

Scarica il font icona sul tuo computer

Basta scaricare i caratteri dell’icona e decomprimere il pacchetto.

Ora dovrai connetterti al tuo hosting WordPress usando un client FTP e andare alla directory del tuo tema WordPress.

È necessario creare una nuova cartella lì e denominarlo font. Successivamente, è necessario caricare i contenuti della cartella dei caratteri dell’icona nella directory dei caratteri sul server di web hosting.

Caricamento dei caratteri icona sul tema WordPress

Ora sei pronto per caricare i caratteri icona nel tuo tema WordPress. Aggiungi semplicemente questo codice al file Functions.php del tuo tema o in un plug-in specifico per il sito.

funzione wpb_load_fa () {

wp_enqueue_style (‘wpb-fa’, get_stylesheet_directory_uri (). ‘/fonts/css/font-awesome.min.css’);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

Hai caricato correttamente Font Awesome nel tuo tema WordPress.

Ora arriva la parte in cui verranno aggiunte le icone effettive al tema, ai post o alle pagine di WordPress.

Visualizzazione manuale dei caratteri icona in WordPress

Vai al sito Web di Font Awesome per vedere l’elenco completo delle icone disponibili. Fai clic su qualsiasi icona che desideri utilizzare e sarai in grado di vedere il nome dell’icona.

Nome dell'icona
Copia il nome dell’icona e usalo in questo modo in WordPress.

Puoi personalizzare questa icona nel foglio di stile del tuo tema in questo modo:

.fa-arrow-alt-circle-up {
font-size: 50px;
color: # FF6600;
}

Puoi anche combinare diverse icone insieme e assegnarle contemporaneamente. Ad esempio, supponiamo che tu voglia visualizzare un elenco di collegamenti con icone accanto a loro. Puoi avvolgerli sotto un elemento con una classe specifica.

Casa
Biblioteca
applicazioni
impostazioni

Ora puoi modellarli nel foglio di stile del tuo tema in questo modo:

.icons-group-item i {
colore: # 333;
dimensione carattere: 50px;
}
.icone-gruppo-oggetto i: hover {
colore: # FF6600
}

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente i caratteri icona nel tuo tema WordPress. Potresti anche dare un’occhiata al nostro tutorial su come aggiungere icone di immagini con i menu di navigazione in WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me