Come utilizzare Font Awesome sul tuo sito Web WordPress

Quando viene data la possibilità di scegliere tra l'utilizzo di un'icona vettoriale o un'immagine statica, è una buona idea utilizzare il vettore. Sono piccoli e veloci da caricare e possono adattarsi a qualsiasi dimensione senza perdita di risoluzione. Font Awesome è una superba libreria di icone vettoriali che puoi utilizzare sui tuoi siti Web e probabilmente hanno quasi qualsiasi forma o marchio di cui avresti bisogno. E soprattutto? È gratis. Secondo al migliore di tutti, è facile.

Iscriviti al nostro canale Youtube

Font Impressionanti icone WordPress

L'utilizzo della libreria Font Awesome sul tuo sito WordPress è relativamente indolore. Dopo aver seguito questi semplici passaggi, sarai in grado di ridurre il tempo di caricamento della pagina e creare dei design davvero puliti e nitidi utilizzando queste icone come parte del tuo lavoro.

Una cosa da ricordare è che (il più delle volte) le icone di Font Awesome verranno consegnate al tuo sito come caratteri reali. Da qui il nome Font Awesome. Sarai in grado di modellarli e manipolarli in ogni modo in cui normalmente potresti fare con un carattere, usando CSS tramite @font-face e Font Awesome font-family .

Per questo motivo, non dovrai preoccuparti del dimensionamento o della spaziatura per ogni singolo browser o viewport. Se suona alla grande, è perché lo è. Ed ecco come lo fai:

Installazione di Font Awesome

Sebbene esista un modo manuale per installare e utilizzare Font Awesome, esiste un modo migliore per gli utenti di WordPress. I bravi ragazzi di FA hanno rilasciato un plugin ufficiale per Font Awesome WordPress e funziona magnificamente.

Con il plug-in installato e attivato, ora hai accesso allo shortcode [[icon name]] e agli snippet HTML. Finché tieni in giro l'utile elenco di icone FA in modo da sapere esattamente quale icona ti serve. Vedrai nella pagina delle impostazioni del plug-in (che si trova in Impostazioni - Font Awesome ) come sono impostate le cose per impostazione predefinita. In generale, questi vanno bene da conservare e da usare. La maggior parte delle persone non avrà bisogno di nient'altro.

L'opzione Metodo è probabilmente la più importante per la maggior parte delle persone. Puoi alternare tra Webfont o SVG . Mentre SVG ti offre più potenza e funzionalità (come trasformazioni di potenza e mascheramento), il CDN di Font Awesome fornirà le icone come file SVG e non come font. Anche se in qualche modo è meglio, SVG non è riconosciuto da tanti browser, né WordPress funziona sempre bene con le immagini SVG. Quindi ti suggeriamo di giocare sul sicuro con la versione webfont.

Lo stesso vale per Font Awesome, del resto: se non sei sicuro della differenza o non sai perché dovresti usare SVG, allora attenersi al metodo webfont predefinito è probabilmente più semplice.

Per utilizzare le icone Font Awesome sul tuo sito WordPress, è semplice. Aggiungi <i class=”fab fa-wordpress”></i> ovunque desideri che appaia un'icona. Assicurati di controllare la libreria di icone per sapere quale nome inserire.

Nota: gli shortcode nel plugin sono incostante. Alcune icone vengono visualizzate perfettamente, mentre altre vengono visualizzate vuote. Ti consigliamo di attenerti all'inserimento HTML a meno che tu non veda che lo shortcode funziona per te. Vedi sotto per un esempio dell'esempio di WordPress sopra che non esegue il rendering, mentre l'icona della fotocamera lo fa.

E hai finito. Il plugin Font Awesome WordPress è ottimo per le persone che non si sentono a proprio agio nell'accedere al tema o ai file per inserire il codice altrimenti richiesto. Tuttavia, se ti senti a tuo agio, puoi seguire queste istruzioni per ottenere le icone Font Awesome sul tuo sito.

Installazione manuale delle icone di Font Awesome

La prima cosa che devi fare è visitare il sito Web di Font Awesome. Da lì, fai clic sul pulsante Inizia a utilizzare gratuitamente . Offrono piani a pagamento per le persone che hanno siti ad alto traffico e hanno bisogno di una soluzione aziendale, ma il pubblico in generale può farla franca con la versione gratuita. Ottieni 1.500 icone gratuitamente e oltre 5.000 varianti sul piano Pro.

Il prossimo passo è semplicemente copiare/incollare. Ma vorrai assicurarti di aver evidenziato l'opzione webfont, proprio come abbiamo discusso prima.

La maggior parte dei temi ha uno spazio in cui inserire automaticamente il codice nell' <head> del sito. Nel caso di Divi, ad esempio, dovresti andare in Opzioni del tema – Integrazioni e incollare questo codice nel campo etichettato Aggiungi codice all'intestazione del tuo blog .

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Quando fai clic su Salva, puoi iniziare a includere una qualsiasi delle icone che desideri, proprio come abbiamo fatto sopra. Solo, non hai accesso allo shortcode in questo modo.

Se il tuo tema non supporta l'integrazione del codice

Se non riesci a trovare un punto come questo nel tuo tema, è altrettanto facile farlo manualmente. Dovrai scavare nei file principali del tuo tema per farlo, tuttavia, ma è un copia/incolla molto veloce ed è (generalmente) abbastanza sicuro da fare. Vai su Aspetto - Editor nella dashboard di WP e trova il file header.php .

Trova la riga in cui è scritto </head> e prima di essa devi incollare lo stesso codice da Font Awesome. Premi Aggiorna file e sarai in grado di iniziare a utilizzare immediatamente le icone FA. Ancora una volta, non ottieni uno shortcode installando Font Awesome in questo modo.

Inoltre, tieni presente che ogni volta che modifichi un file di tema, desideri utilizzare un tema figlio. In questo modo, impedisci che le modifiche apportate vengano sovrascritte quando il tema viene aggiornato.

Più opzioni per l'installazione

E se hai altre esigenze più specifiche per Font Awesome, offrono una serie di modi per accedere alla libreria. Dalle installazioni di NPM e Yarn, all'integrazione di Sketch e React, hanno un sacco di opzioni se ne hai bisogno per più di WordPress.

Disegnare le icone fantastiche dei caratteri

Ora che li hai installati, è il momento di far apparire le icone. Puoi farlo usando i CSS perché ciascuna delle icone è governata da una classe CSS. I due stili più utilizzati sono il colore e la dimensione. Puoi includere lo stile CSS nei tuoi fogli di stile oppure puoi farlo in linea. In generale, potresti voler utilizzare lo stile in linea perché icone come queste non tendono ad essere universali in un intero sito.

Il sito Web Font Awesome ha esempi di come farlo. Mostrano le dimensioni utilizzando la loro icona igloo e la classe aggiuntiva come fa-xs o fa-xl o fa-2x per dimensioni specifiche.

Inoltre, se hai bisogno che l'icona sia relativa a una dimensione specifica e i valori assoluti non funzioneranno, puoi posizionarla nel proprio <div> per farlo funzionare entro i tuoi vincoli.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Avvolgendo

E questo è tutto! Fantastico, vero? Sia che tu stia utilizzando il plug-in Font Awesome WordPress o inserendo il codice manualmente, non sono necessari più di pochi passaggi per far funzionare il tuo sito. Font Awesome è popolare per una ragione, e parte di ciò deriva dalla sua facilità d'uso. Quindi esci e sii fantastico!

Qual è il tuo modo preferito di usare le icone di Font Awesome?

Immagine in primo piano dell'articolo per gentile concessione di Font Awesome