Come aggiungere facilmente caratteri di icone nel tema di WordPress

Vuoi aggiungere caratteri di icone sul tuo sito WordPress? Recentemente uno dei nostri utenti ci ha chiesto qual è il modo più semplice per aggiungere font di icone nel loro tema WordPress? Caratteri di icone che ti consentono di aggiungere icone vettoriali senza rallentare il tuo sito web. In questo articolo, ti mostreremo come aggiungere facilmente caratteri di icone nel tuo tema WordPress.

Cosa sono i font di icone e perché dovresti usarli?

I caratteri icona contengono simboli o pittogrammi anziché lettere e numeri. Questi pittogrammi possono essere facilmente ridimensionati usando i CSS senza aumentare in modo significativo le dimensioni del download della pagina.

I caratteri icona possono essere utilizzati per visualizzare simboli comunemente usati. In un tipico sito Web, è possibile utilizzarli per il carrello degli acquisti, i pulsanti di download, le finestre delle funzionalità, i cursori, i pulsanti dei social media e persino nei menu di navigazione di WordPress.

Ci sono diversi font di icone gratuiti e open source disponibili con centinaia di icone. In effetti, ogni installazione di WordPress viene fornita con il set di caratteri dell'icona di dashicons gratuiti. Queste icone sono utilizzate nella barra degli strumenti di amministrazione di WordPress all'interno dell'area di amministrazione.

Alcuni altri tipi di carattere icona popolari sono:

• Font Awesome
• Genericons
• IcoMoon
• Linearicons

Per il bene di questo tutorial, utilizzeremo FontAwesome. È il font più popolare, gratuito e open source disponibile, e lo usiamo anche sul nostro builder OptinMonster.

Copriremo due modi per aggiungere font di icone in WordPress. Il primo metodo utilizzerà un plug-in e il secondo mostrerà come aggiungere un font di icona senza un plug-in.

Aggiunta di caratteri di icone in WordPress utilizzando i plugin

FontAwesome e altri font icona gratuiti sono supportati da molti plugin WordPress. L'utilizzo di un plug-in ti consente di aggiungere facilmente un carattere icona a qualsiasi tema WordPress senza modificare alcun codice.

La prima cosa che devi fare è installare e attivare il plugin Better Font Awesome. Dopo l'attivazione, puoi visitare Impostazioni »Migliore carattere Impressionante pagina per configurare le impostazioni del plugin. Tuttavia, il plugin funziona fuori dalla scatola, quindi la maggior parte degli utenti non ha bisogno di modificare nulla lì.

Better Font Awesome ti permette di aggiungere icone di font usando shortcode come questo:

[nome dell'icona = "razzo"]
[icon name = "cloud"]
[nome icona = "cuffie"]

Puoi anche aggiungere le icone nell'editor di post semplicemente selezionando un'icona. Vai avanti crea un nuovo post o modificane uno esistente e vedrai il Inserisci il pulsante icona.

Cliccando su di esso verrà visualizzato un popup in cui è possibile individuare un'icona e inserirla.

Noterai che il plugin aggiungerà uno shortcode nel tuo editor di post che sarà simile a questo:

[nome icona = "università"]

Se si desidera personalizzare ulteriormente l'icona, è possibile aggiungere la propria classe CSS per aggiungere stili personalizzati.

[nome icona = "università"]

Ora puoi modificare l'icona utilizzando i CSS nel tuo foglio di stile del tema o del tema secondario.

 .fa-universityicon font-size: 100px; color: # FF6600;  

È così semplice.

Ora diamo un'occhiata a come è possibile aggiungere font di icone in WordPress senza un plugin.

Aggiunta di font di icone in WordPress manualmente

Come accennato in precedenza, i font di icone sono solo caratteri e possono essere aggiunti al tuo sito come se dovessi aggiungere caratteri personalizzati.

Alcuni font di icone 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 font in una cartella nel tuo tema WordPress e quindi usare quei font nel tuo foglio di stile.

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

Metodo 1:

Questo è il più semplice. Tutto quello che devi fare è aggiungere questa singola riga di codice nel tuo tema header.php file appena prima del etichetta.

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

Un approccio migliore per caricare fogli di stile o script in WordPress è di accodarli correttamente.

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

 function wpb_load_fa () wp_enqueue_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa'); 

Metodo 2:

Il secondo metodo non è il più semplice, ma ti permetterebbe di avere i caratteri all'interno del tuo tema.

Basta scaricare i font dell'icona e decomprimere il pacchetto. Ora dovrai connetterti al tuo sito web usando un client FTP e andare alla directory del tuo tema WordPress.

È necessario creare una nuova cartella lì e nominare i caratteri. Successivamente, è necessario caricare il contenuto della cartella dei caratteri dell'icona nella directory dei caratteri sul server.

Ora sei pronto per caricare i font di icone nel tuo tema WordPress. Basta aggiungere questo codice al file functions.php del tuo tema o in un plug-in specifico del sito.

 function 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 con successo Font Awesome nel tuo tema WordPress.

Ora arriva la parte in cui si aggiungeranno le icone reali nel tema, nei post o nelle pagine di WordPress.

Visualizzazione manuale dei font delle icone in WordPress

Vai al sito Web di Font Awesome per visualizzare l'elenco completo delle icone disponibili. Fare clic su qualsiasi icona che si desidera utilizzare e sarà possibile vedere il nome dell'icona.

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

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

 .fa-optin-monster dimensione font: 50px; color: # FF6600;  

Puoi anche combinare insieme diverse icone e modellarle contemporaneamente. Ad esempio, diciamo che vuoi visualizzare un elenco di link con icone accanto a loro. Puoi racchiuderli 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 color: # 333; font-size: 50px;  .icons-group-item i: hover color: # FF6600 

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

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.