Condividi questo contenuto!
In questa guida ti mostreremo come aggiungere icone font in WordPress facilmente.
Vuoi aggiungere caratteri icona sul tuo sito WordPress? Recentemente uno dei nostri lettori ha chiesto qual è il modo più semplice per aggiungere font di icone nel suo tema WordPress.
I font icon ti consentono di aggiungere icone vettoriali (ridimensionabili) senza rallentare il tuo sito web. Vengono caricati come font Web e possono essere definiti utilizzando CSS.
Cosa sono i font icona e perché dovresti usarli?
Le cosiddette icon font (o icone font, fonticon, font-icon, icon-font, caratteri icona, etc.) contengono simboli o pittogrammi invece di lettere e numeri. Questi pittogrammi possono essere facilmente aggiunti al contenuto del sito Web e ridimensionati utilizzando CSS. Rispetto alle icone basate su immagini, le icone font WordPress sono molto più veloci, il che aiuta con la velocità complessiva del tuo sito Web WordPress .
Le icone font possono essere utilizzate per visualizzare le icone di uso comune. Ad esempio, puoi utilizzarli per il carrello della spesa, i pulsanti di download, le caselle delle funzionalità, i concorsi in omaggio e persino inserirle nei menu di navigazione di WordPress.
Sono disponibili diversi font di icone gratuiti e open source con centinaia di bellissime icone.
In effetti, ogni installazione di WordPress viene fornita con un set di caratteri icona dashicon gratuito. Queste icone vengono utilizzate nel menu di amministrazione di WordPress e in altre aree all’interno dell’area di amministrazione di WordPress.
Alcune altre icone font popolari sono:
Per questo tutorial, useremo Font Awesome. È il font di icone gratuito e open source più popolare disponibile.
In questa guida, tratteremo tre modi su come aggiungere le icone font in WordPress. Puoi scegliere la soluzione che funziona meglio per te.
Aggiungere icon font in WordPress utilizzando i plugin
Se sei un utente di livello principiante che cerca solo di aggiungere alcune icone ai tuoi post o pagine, questo metodo è adatto a te. Non dovrai modificare i file del tema e sarai in grado di utilizzare i caratteri delle icone ovunque sul tuo sito web.
La prima cosa che devi fare è installare e attivare il plugin Font Awesome per WordPress. Se non sai come fare, puoi consultare la nostra guida passo passo su come installare un plugin per WordPress.
All’attivazione, il plugin abilita il supporto di Font Awesome per il tuo tema. Ora puoi modificare qualsiasi articolo o pagina di WordPress e utilizzare lo shortcode dell’icona in questo modo:
[icon name = “icon-font-di-prova”]
Puoi utilizzare questo shortcode insieme ad altro testo o da solo in un blocco shortcode dedicato.
Ad esempio, inseriamo lo shortcode dell’icon font di nome “rocket“.
Una volta aggiunto, puoi visualizzare in anteprima il tuo post o la tua pagina per vedere come apparirà l’icona su un sito live. Ecco come appariva sul nostro sito di prova.
Puoi anche aggiungere lo shortcode della font icon all’interno di un blocco di paragrafo da solo, dove puoi usare le impostazioni del blocco paragrafo per aumentare la dimensione dell’icona.
Man mano che aumenti la dimensione del testo, potrebbe sembrare strano all’interno dell’editor di testo. Questo perché lo shortcode non si trasforma automaticamente in una icona font all’interno dell’editor.
Dovrai fare clic sul pulsante di anteprima sul tuo post o pagina per vedere come apparirebbe la dimensione effettiva dell’icona.
Puoi anche utilizzare l’icona shortcode all’interno delle colonne e creare caselle di funzionalità come questa:
2. Inserire font icon in WordPress con un Page Builder
I plugin per la creazione di pagine (page builder) WordPress più popolari sono dotati di supporto integrato per i font icone. Ciò ti consente di utilizzare facilmente i caratteri icona nelle tue pagine di destinazione e in altre aree del tuo sito web.
Beaver Builder è uno dei migliori plug-in per la creazione di pagine di 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 per l’uso che puoi semplicemente trascinare e rilasciare nel tuo post e nelle tue pagine.
Puoi 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.
Puoi persino creare temi WordPress completamente personalizzati senza scrivere alcun codice utilizzando il prodotto Themer di Beaver Builder.
Elementor è un altro popolare plugin per la creazione di pagine di WordPress. Inoltre viene fornito con diversi elementi che consentono di utilizzare le icone font, incluso un elemento Icon.
Puoi semplicemente trascinare e rilasciare un’icona ovunque e usarla con righe, colonne e tabelle per creare bellissime pagine.
Altri popolari page builder come Divi ad esempio hanno anche il pieno supporto per le icon font.
3. Come aggiungere icone font in WordPress con il codice
Come accennato in precedenza, le font icon sono solo caratteri e possono essere aggiunte al tuo sito come faresti con qualsiasi carattere personalizzato.
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é utilizziamo Font Awesome per questo tutorial, ti mostreremo come aggiungerlo utilizzando entrambi i metodi.
Metodo 1:
Questo metodo manuale è abbastanza semplice.
Innanzitutto, devi visitare il sito Web di Font Awesome e inserire il tuo indirizzo email per ottenere il codice di incorporamento.
Ora controlla la tua posta in arrivo per 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 </ head>.
Il tuo codice di incorporamento sarà una singola riga che recupererà la libreria Font Awesome direttamente dai loro server CDN. Assomiglierà a questo:
<script src="https://use.fontawesome.com/123456abc.js"></script>
Questo metodo è il più semplice, ma può causare conflitti con altri plugin.
Un approccio migliore sarebbe caricare correttamente JavaScript in WordPress utilizzando il meccanismo di accodamento integrato.
Invece di collegarti al foglio di stile dal modello di header del tuo tema, puoi aggiungere il seguente codice nel file functions.php del tuo tema o in un plugin specifico del sito.
function 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 consentirà di avere salvati i caratteri dell’icona di Font Awesome sul tuo sito web.
Innanzitutto, è necessario visitare il sito Web Font Awesome per scaricare il pacchetto di caratteri sul computer.
Basta scaricare le icone font e decomprimere il pacchetto.
Ora, dovrai connetterti al tuo hosting WordPress utilizzando un client FTP e andare alla directory del tuo tema WordPress.
È necessario creare una nuova cartella lì e denominarla fonts. Successivamente, è necessario caricare il contenuto della cartella scaricata nella directory fonts sul server di hosting web.
Ora sei pronto per caricare le icon font nel tuo tema WordPress. Aggiungi semplicemente 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 aggiungere icone font realmente al tuo tema, post o pagine WordPress.
Inserire font icon in WordPress manualmente
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.
Copia il nome dell’icona e usalo in questo modo su WordPress.
<i class="fa-arrow-alt-circle-up"></i>
Puoi modellare 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 modellarle contemporaneamente. Ad esempio, supponiamo che tu voglia visualizzare un elenco di collegamenti con icone accanto ad essi: puoi racchiuderli in un elemento con una classe specifica.
<div class="icons-group"> <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a> <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a> <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a> <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a> </div>
Ora puoi modellarli nel foglio di stile CSS del tuo tema in questo modo:
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}
E’ tutto! Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere icone font in WordPress facilmente. Potresti anche dare un’occhiata al nostro tutorial su come aggiungere icone al menu di navigazione in WordPress.
Dichiarazione sulla trasparenza: il contenuto di B-Fast è supportato dal lettore, il che significa che se fai clic su alcuni dei collegamenti in questo post, potremmo guadagnare una piccola tassa di riferimento. Tieni presente che raccomandiamo solo prodotti che utilizziamo noi stessi e / o che riteniamo possano aggiungere valore ai nostri lettori.
Condividi questo contenuto!
Related Posts
