Un sito web senza icone sembra un muro di testo del 2005. Ma disegnare icone in Photoshop e smanettare con gli sprite non è divertente, soprattutto se non sei un designer.

Font Awesome risolve questo problema dal 2012: è una libreria gratuita di oltre 2000 icone vettoriali che si comportano come testo normale. Cambia il colore nei CSS e l'icona cambia colore. Aumenta la dimensione del font e si ridimensiona senza pixelizzazione o sfocature.

In pratica, la versione gratuita è sufficiente per menu, pulsanti e social media. Se hai bisogno di duotone e oltre 30.000 icone, c'è Pro a partire da $60 all'anno. Ecco tre modi per aggiungere Font Awesome a WordPress: dal più semplice all'installazione manuale per chi non ha paura di functions.php.

💡 Panoramica rapida:

• Installa il plugin ufficiale Font Awesome dalla directory di WordPress; ci vuole un minuto e non richiede modifiche al codice
• Per un controllo manuale, collega Font Awesome tramite CDN o Kit nel functions.php del tuo tema child
• Se usi Elementor, le icone sono già integrate e non serve un plugin separato
• Dopo il collegamento, modifica dimensione, colore e animazione delle icone tramite CSS o classi predefinite

Cos'è Font Awesome

Font Awesome è un font di icone: invece di lettere, contiene simboli di icone. Il browser le renderizza come grafica vettoriale, quindi i bordi restano nitidi su qualsiasi schermo e a qualsiasi scala. Niente PNG, sprite o srcset.

La libreria è divisa in due parti. La versione gratuita include cinque stili: Solid, Regular, Brands, Duotone e Sharp. Pro aggiunge Thin, Light e decine di migliaia di icone, più la possibilità di caricare i propri SVG tramite Kit. Per un tipico sito vetrina o blog, Free copre la stragrande maggioranza delle esigenze: frecce, social media, ricerca, carrello, checkbox.

Il vantaggio principale rispetto alle icone raster è il pieno controllo tramite CSS. Colore, dimensione, ombra, rotazione, animazione: tutto si imposta con le classi senza alcuna modifica grafica.

Metodo 1: plugin ufficiale (consigliato)

La strada più sicura è installare il plugin ufficiale Font Awesome su WordPress.org. È rilasciato dallo stesso team che crea la libreria. Il plugin si aggiorna in sincronia con le nuove release di icone e non dipende dal tuo tema.

Come installarlo:

Vai su Plugin → Aggiungi nuovo. Nella barra di ricerca, digita "font awesome" e premi Invio.

Clicca Installa ora, poi Attiva.

Fatto. Dopo l'attivazione, nel menu Impostazioni compare una voce Font Awesome dove puoi cambiare la sorgente delle icone (CDN o Kit), abilitare la compatibilità con la versione quattro ed eseguire lo scanner dei conflitti.

Il plugin aggiunge un blocco "Font Awesome Icon" separato nell'editor a blocchi. Cliccaci sopra e si apre una ricerca sull'intera libreria. Seleziona un'icona, clicca "Inserisci" e apparirà nel testo come SVG. Lo styling è direttamente nella barra laterale del blocco: dimensione, colore, rotazione.

Per l'editor classico, funziona uno shortcode:

1
[icon name="download" prefix="fa-solid"]

Oppure HTML puro:

1
<i class="fa-solid fa-download"></i>

Se hai un account Pro, crea un Kit su fontawesome.com, copia il Token API e incollalo nelle impostazioni del plugin. Fatto questo, il Selettore Icone mostrerà anche le icone Pro.

Metodo 2: installazione manuale via functions.php

Questo metodo è per chi vuole controllare ogni risorsa caricata sul sito o evitare plugin aggiuntivi. Funziona tramite un child theme, in modo che l'aggiornamento del tema padre non cancelli le modifiche.

Creare un child theme

Nella cartella wp-content/themes/, crea una directory con il suffisso -child (per esempio, astra-child). All'interno, crea due file.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Vai su Aspetto → Temi e attiva il child theme.

Collegare Font Awesome via CDN

Aggiungi questo codice al functions.php del child theme:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Questo hook carica la versione gratuita dal CDN cdnjs, il CDN pubblico più affidabile per FA 6. Il numero 6.7.2 è la versione a giugno 2026; verifica la versione corrente sulla pagina del pacchetto cdnjs e sostituiscila con l'ultima disponibile.

Alternativa: Kit di Font Awesome

Il Kit dà accesso alle icone Pro e carica automaticamente solo gli stili usati nella pagina, riducendo i kilobyte superflui.

Registrati sul sito di Font Awesome, crea un Kit, copia il codice embed e incollalo nel header.php del child theme prima di </head>:

1
<script src="https://kit.fontawesome.com/YOUR_CODE.js" crossorigin="anonymous"></script>

Lo svantaggio del Kit è che il piano gratuito è limitato a 10.000 visualizzazioni di pagina al mese. Per un sito con traffico più alto, usa il CDN oppure il piano Pro.

L'editor dei temi integrato (Aspetto → Editor file del tema) permette di modificare functions.php direttamente dal pannello di amministrazione. Tuttavia, è più sicuro lavorare via FTP o con il file manager dell'hosting: un errore di battitura nel codice PHP blocca il sito e, senza accesso ai file, non avrai modo di ripristinarlo.

Metodo 3: tramite Elementor o un altro page builder

Se utilizzi già Elementor, non hai bisogno di un plugin separato per Font Awesome; il page builder include la libreria in modo nativo.

In qualsiasi widget con un'icona (Icona, Box Icona, Elenco Icone), clicca sull'icona e si apre una libreria con ricerca su tutti gli stili Free. Colore, dimensione, ombra ed effetti hover si configurano dalla barra laterale senza scrivere una sola riga di CSS.

Lo stesso vale per SeedProd, Beaver Builder e Divi. Verifica le impostazioni del tuo page builder: quasi tutti i visual builder più diffusi per WordPress integrano già Font Awesome nel loro core.

Come modificare lo stile delle icone

Dopo aver collegato Font Awesome, controlli le icone esclusivamente tramite classi e CSS. Non serve modificare direttamente i file SVG.

Dimensione

La dimensione dell'icona si imposta usando classi predefinite. Una classe rende l'icona più grande di un terzo, un'altra la raddoppia, un'altra la triplica, e così via fino a dieci volte l'ingrandimento. Vedi i valori esatti per tutte le classi sul sito di Font Awesome.

Esempio di icona con dimensione triplicata:

Esempio di icona con dimensione triplicata:

1
<i class="fa-solid fa-download fa-3x"></i>

Rotazione e capovolgimento

• fa-rotate-90, rotazione di 90°
• fa-rotate-180, rotazione di 180°
• fa-rotate-270, rotazione di 270°
• fa-flip-horizontal, specchio orizzontale
• fa-flip-vertical, specchio verticale

Animazione

Due opzioni, entrambe tramite classi:

• fa-spin, rotazione fluida (adatta per spinner di caricamento)
• fa-pulse, rotazione a otto passi (effetto pulsante)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Colore

Il colore dell'icona viene ereditato dal testo genitore. Per impostarne uno proprio, usa una regola CSS:

1
.fa-download {
2
    color: #27ae60;
3
}

Il modo più semplice per aggiungere questo CSS è tramite Aspetto → Personalizza → CSS aggiuntivo. Le modifiche si applicano immediatamente e sono visibili in tempo reale.

Icona tramite pseudo-elemento

Quando un'icona deve essere associata a un elemento senza markup aggiuntivo, usa ::before o ::after nel CSS:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

Il codice \f08e è l'identificativo Unicode dell'icona. Lo trovi nella pagina della singola icona su fontawesome.com, dove è indicato sotto il nome.

Dove trovare le icone

Apri fontawesome.com/icons, digita una parola chiave nella ricerca e scegli uno stile. Nella pagina dell'icona troverai lo snippet HTML, il codice Unicode e l'elenco degli stili disponibili. Copia e incolla dove ti serve.

Una nota sul video tutorial

Se preferisci guardare un video invece di leggere, ecco un tutorial su come aggiungere le icone di Font Awesome a un menu WordPress:

Dopo averlo visto, torna al testo: qui sotto trovi alcune sfumature non trattate nel video.

⁉️🤔 Domande frequenti

Devo pagare per Font Awesome?

La versione gratuita copre le esigenze della stragrande maggioranza dei siti: oltre 2000 icone in cinque stili, incluse le icone dei brand (Facebook, Twitter, Instagram e centinaia di altre). La versione Pro costa a partire da 60 $ all'anno e aggiunge le famiglie Thin, Light, Sharp, il Duotone in tutti gli stili e la possibilità di caricare le proprie SVG. Pagare ha senso se vendi icone come parte di un prodotto o se hai specificamente bisogno dei duotone. Il plugin Font Awesome su WordPress.org è completamente gratuito; le icone Pro si collegano tramite API Token nelle impostazioni dello stesso plugin, senza bisogno di acquistare o installare nulla separatamente.

Quale metodo di connessione dovrei scegliere?

Per principianti e siti tipici, il plugin ufficiale. Si installa in due clic, ha una ricerca icone integrata nell'editor e uno scanner dei conflitti. L'installazione manuale via CDN è giustificata se stai riducendo al minimo i plugin sul tuo sito e sai esattamente in quale file aggiungere wp_enqueue_style. Il Kit di Font Awesome è un compromesso: facile da collegare senza un plugin, ma con un limite gratuito di 10.000 visualizzazioni.

Cosa devo fare se le icone non vengono visualizzate?

Per prima cosa, esegui lo Scanner di Rilevamento Conflitti nelle impostazioni del plugin Font Awesome. Molto spesso il problema è che il tema o un altro plugin sta caricando una propria versione di Font Awesome, causando un conflitto di versione. Lo scanner troverà l'origine del conflitto e il plugin proporrà di bloccarla. Il secondo caso comune è un errore di sintassi: controlla di star usando il prefisso fa-solid e non fa (che è la sintassi della vecchia versione quattro).

Posso usare Font Awesome senza WordPress?

Sì, Font Awesome non è legato a WordPress. Collega il link CDN nel <head> di qualsiasi documento HTML e inserisci le icone con il tag <i class="fa-solid fa-name"></i>. Funziona con React, Vue, Laravel, HTML semplice e persino con i generatori di PDF. Su fontawesome.com/docs ci sono le istruzioni per una dozzina di piattaforme.

Perché Font Awesome è migliore di altre librerie di icone?

Due argomenti principali: dimensione della community e compatibilità. Font Awesome è usato da milioni di siti, quindi la documentazione è tradotta in una dozzina di lingue e le risposte a qualsiasi problema si trovano in pochi secondi con una ricerca. Secondo, il plugin ufficiale per WordPress con risoluzione automatica dei conflitti: né Material Icons né Bootstrap Icons offrono questo.

Ne vale la pena: cosa scegliere per il tuo progetto

Se sei arrivato a leggere fin qui, la tabella qui sotto ti farà risparmiare tempo:

Verifica che dopo la connessione le icone vengano visualizzate correttamente in diversi browser e su dispositivi mobili. Se noti sfarfallii o sostituzioni di icone, esegui lo scanner dei conflitti dalla sezione "Risoluzione dei problemi" nelle impostazioni del plugin. Il problema si risolve quasi sempre con un pulsante.