Come aggiungere icone fantastiche di font a WordPress: la guida completa

Ecco di cosa tratta questa guida. Al termine della lettura, saprai esattamente come:

• Aggiungi manualmente il foglio di stile Font Awesome a WordPress
• Aggiungi Font Awesome a WordPress con un plugin gratuito
• Inserisci e applica uno stile alle icone Font Awesome in una varietà di modi diversi

Scendiamo...

Perché dovresti prenderti il ​​tempo per aggiungere icone fantastiche di caratteri a WordPress

Le icone di Font Awesome sono fantastiche perché, come suggerisce il nome, sono un carattere icona, piuttosto che immagini. Ciò significa che puoi fare cose interessanti come:

• Ridimensiona senza perdere qualità perché le icone sono vettori
• Cambia i colori, aggiungi animazioni e usa altre manipolazioni CSS

Tutto ciò per dire, le icone di Font Awesome sono di gran lunga superiori al semplice utilizzo di un'immagine statica.

Innanzitutto, ti mostrerò due modi diversi per aggiungerli al tuo sito. Quindi, ti mostrerò come puoi modellare e manipolare le tue icone (indipendentemente dal metodo che scegli).

Come aggiungere manualmente icone fantastiche di font a WordPress

Se il pensiero di scavare nel codice del tuo tema ti spaventa, ti consiglio di passare alla sezione successiva in cui ti mostrerò come aggiungere icone Font Awesome a WordPress usando un plugin gratuito.

Altrimenti, mi piace questo metodo per un modo piacevole e leggero per far funzionare Font Awesome.

Fondamentalmente, tutto ciò che devi fare è aggiungere il foglio di stile Font Awesome al tuo tema WordPress. Quindi, puoi iniziare a inserire le icone di Font Awesome e a modellarle come preferisci.

Ecco come funziona l'intero processo, passo dopo passo:

Passaggio 1: accoda il fantastico foglio di stile dei caratteri nel tuo tema WordPress

Come ho detto, il tuo primo passo è aggiungere il foglio di stile CSS Font Awesome al tuo tema WordPress. Anche se puoi ottenerlo direttamente dal sito Web Font Awesome, il mio metodo preferito è utilizzare la versione ospitata su Bootstrap CDN.

Attualmente, quel collegamento è:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Ma cambierà quando Font Awesome rilascerà nuove versioni. Quindi è una buona idea aggiornare semi-regolarmente il collegamento all'ultima versione (sebbene le versioni precedenti continueranno a funzionare).

Per aggiungere questo foglio di stile a WordPress, devi accodarlo nel file functions.php del tuo tema figlio . Sebbene il metodo di base per aggiungere CSS sia inserire il collegamento nell'intestazione, è consigliabile utilizzare la speciale funzione di accodamento di WordPress invece di inserire il foglio di stile direttamente nell'intestazione.

Inoltre, l'utilizzo di un tema figlio garantisce che le modifiche non vengano sovrascritte se è necessario aggiornare il tema.

Poiché seguire le migliori pratiche del codice di WordPress è una buona cosa, ti consiglio vivamente di utilizzare sia un tema figlio che la funzione di accodamento.

Ok, ecco come fare:

Vai su Aspetto → Editor e seleziona il file functions.php per il tuo tema figlio.

Quindi, incolla questo codice:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Assicurati di salvare le modifiche e il gioco è fatto! Non troppo doloroso, giusto?

Passaggio 2: inserisci le icone di Font Awesome

Dopo aver accodato il foglio di stile, puoi inserire le icone di Font Awesome nel tuo sito andando alla ricerca di icone di Font Awesome e trovando un'icona che desideri inserire:

Quando fai clic su un'icona, Font Awesome ti fornirà il codice necessario per utilizzare l'icona:

Tutto quello che devi fare è inserire quel codice nella scheda Testo dell'editor di WordPress per aggiungere un'icona al tuo sito.

E questo è tutto! Hai aggiunto con successo il supporto per Font Awesome a WordPress. Ora non resta che imparare a dare uno stile alle icone di Font Awesome sul tuo sito WordPress.

Ma prima di mostrartelo, voglio esaminare il metodo del plug-in per aggiungere il supporto per Font Awesome. Sentiti libero di saltare avanti se sei andato con il metodo manuale sul metodo plug-in.

Come aggiungere icone fantastiche di font a WordPress con un plug-in

Se preferisci utilizzare un plug-in invece di accodare manualmente il foglio di stile Font Awesome, c'è una solida opzione gratuita elencata su WordPress.org chiamata Better Font Awesome.

Oltre ad aggiungere sempre l'ultimo foglio di stile al tuo sito, Better Font Awesome anche:

• Ti consente di utilizzare gli shortcode per incorporare le icone di Font Awesome.
• Ti offre un menu a discesa nell'editor TinyMCE per inserire le icone.

Se hai intenzione di utilizzare regolarmente le icone di Font Awesome, questi due strumenti potrebbero semplificarti la vita. Ma per un uso raro, penso che il metodo manuale sia l'opzione più semplice perché è il più leggero.

Passaggio 1: installa e attiva il plug-in

Per aggiungere Font Awesome, tutto ciò che devi fare è installare e attivare il plugin. Non c'è davvero nient'altro.

Sebbene sia presente un pannello delle impostazioni di base a cui puoi accedere andando su Impostazioni → Better Font Awesome , sei totalmente libero di lasciare tutto come predefinito.

Passaggio 2: inserisci le icone di Font Awesome

Per inserire le icone di Font Awesome con il plugin, hai due diverse opzioni:

• Usa il codice dal sito Web di Font Awesome come ho dimostrato nella sezione precedente.
• Usa codici brevi, che possono essere generati da un menu a discesa.

Poiché ti ho già mostrato il primo metodo nella sezione precedente, ti darò solo una rapida occhiata al generatore di shortcode a discesa.

Quando vai a creare un nuovo post o pagina, noterai un nuovo pulsante Inserisci icona accanto al pulsante Aggiungi media . Se fai clic su di esso, vedrai tutte le icone disponibili di Font Awesome, oltre a un'opzione per filtrare i risultati:

Tutto quello che devi fare è cliccare sull'icona che hai scelto e il plugin inserirà lo shortcode corretto:

E questo è tutto quello che c'è da fare!

Ora che hai il supporto per le icone di Font Awesome, esaminiamo alcuni modi in cui puoi modellare e manipolare le tue icone di Font Awesome.

Come dare uno stile alle icone fantastiche dei caratteri e modificare le dimensioni

Indipendentemente dal metodo utilizzato per aggiungere Font Awesome a WordPress, utilizzerai gli stessi principi di base per lo stile delle tue icone.

Inoltre, questi comandi funzionano sia che tu stia utilizzando codici brevi o il codice di incorporamento dal sito di Font Awesome.

La maggior parte di questi suggerimenti viene estratta direttamente dalla pagina degli esempi di Font Awesome, quindi non devi preoccuparti della compatibilità.

Cambia la dimensione delle icone di Font Awesome

Iniziamo con uno di base: aumentare le dimensioni delle tue icone Font Awesome. Per impostazione predefinita, le icone sono piuttosto piccole, quindi questa è sicuramente una situazione che probabilmente incontrerai.

Per aumentare le dimensioni di un'icona, puoi utilizzare uno qualsiasi di questi modificatori:

• fa-lg – aumenta le dimensioni del 33%
• fa-2x – raddoppia le dimensioni
• fa-3x – triplica le dimensioni
• fa-4x – …
• fa-5x – …

Per utilizzare quei modificatori, è sufficiente aggiungerlo dopo il nome dell'icona (ma all'interno delle virgolette) per il codice e all'interno delle virgolette della classe per lo shortcode. Ecco un esempio di triplicazione della dimensione di un'icona per entrambi i metodi di incorporamento:

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [nome icona=”download” class=” fa-3x “]

Ad esempio, questo:

Diventa questo sul front-end:

Ruota le icone fantastiche dei caratteri

Puoi anche ruotare facilmente le icone di Font Awesome per cambiarne l'orientamento.

Ecco i modificatori per la rotazione. Puoi usare uno di questi esattamente come i modificatori di dimensione sopra:

• fa-rotate-90 – ruota di 90 gradi
• fa-rotate-180 – ruota di 180 gradi
• fa-rotate-270 – ruota di 270 gradi
• fa-flip-horizontal – capovolge l'icona lungo il suo asse orizzontale
• fa-flip-vertical – capovolge l'icona lungo il suo asse verticale

Aggiungi animazione alle icone di Font Awesome

Puoi anche aggiungere alcune animazioni di base alle tue icone. Font Awesome ti offre due diversi modificatori per aggiungere rotazioni:

• fa-spin – aggiunge una rotazione regolare
• fa-pulse – fa ruotare l'icona in 8 diversi passaggi

Queste animazioni sono abbinate al meglio con icone circolari. Se usi altre icone dalla forma strana, l'effetto potrebbe sembrare un po' strano.

Cambia il colore dell'icona del carattere fantastico

Infine, ti mostrerò come cambiare il colore delle icone di Font Awesome. Sfortunatamente, non ci sono modificatori integrati per questo. Invece, dovrai usare alcuni CSS personalizzati.

Non preoccuparti, però: è semplicissimo.

Tutto ciò di cui hai bisogno è questo piccolo codice:

.fa-NAME {
color: COLOR;
}

Dove fa-NAME è il nome effettivo della tua icona e COLORE è il colore in cui vuoi cambiarla.

Per rimanere con l'icona di download dei nostri esempi precedenti, ecco come la diventeresti rossa:

Puoi facilmente aggiungere CSS personalizzati andando su Aspetto → Personalizzatore → CSS aggiuntivo .

Avvolgere le cose

Le icone di Font Awesome potrebbero richiedere un paio di minuti per la configurazione. Ma una volta che li hai installati, sono lì per sempre. Da quel momento in poi, tutto ciò che devi fare per inserire e dare uno stile alle singole icone di Font Awesome è seguire i passaggi precedenti.

Basta essere consapevoli: se usi il metodo manuale, ti consigliamo di accedere periodicamente e aggiornare il collegamento al foglio di stile per rimanere al passo con le ultime versioni.