Come correggere le icone fantastiche dei caratteri spezzati in WordPress - IT

Un'icona di Font Awesome rotta viene visualizzata in WordPress come una delle due cose: uno spazio vuoto o un quadrato vuoto. Quello che vedi ti dice quale correzione usare. Abbiamo riprodotto nove cause in WordPress 7.1.3 con Font Awesome 7.3.1, la versione attuale, e testato le correzioni.

Risposta rapida: i soliti colpevoli sono due copie di Font Awesome caricate insieme, o versione 4 nomi delle classi in una versione più recente. Questo cancella entrambi:

1. Installa il funzionario Carattere fantastico collegare, quindi aperto impostazioni > Carattere fantastico.
2. Partire Compatibilità con le versioni precedenti impostato su Su, quindi versione 4 i nomi continuano a funzionare.
3. Apri il Risoluzione dei problemi scheda e fare clic Abilita scanner per 10 minuti.
4. Visita ogni pagina in cui le icone sono rotte, poi torna a Risoluzione dei problemi.
5. Tic tac Bloccare accanto a ogni copia aggiuntiva elencata dallo scanner e fare clic Salvare le modifiche.
6. Svuota il plugin della cache e ricarica la pagina.

Ultima revisione: ottobre 2026. I passaggi sono stati testati in WordPress 7.1.3 utilizzando WordPress Playground su 12 ottobre 2026. Non quella causa? La sezione successiva ordina gli altri in base a ciò che vedi nella pagina.

Spazio vuoto o quadrato vuoto? Leggi prima il sintomo

I due sintomi hanno cause diverse, e mescolarli è un'ora sprecata. Nel nostro test, una pagina senza foglio di stile Font Awesome funzionante non mostrava nulla a cui appartenevano le icone. Una pagina con il foglio di stile ma senza i file dei caratteri mostrava un quadrato per ogni icona.

Senza il foglio di stile Font Awesome la colonna dell'icona è vuota. Con il 7.3.1 foglio di stile ma nessun file di caratteri, ogni icona è un quadrato. WordPress 7.1.3, testato in WordPress Playground, 12 ottobre 2026.

Controlla anche il browser. Fare clic con il pulsante destro del mouse sulla pagina, scegliere Ispezionare e apri il file Consolle linguetta. Un file di font mancante lo ha registrato nel nostro test:

Failed to load resource: the server responded with a status of 404 ()

Per contare le copie di Font Awesome su una pagina, aprire l'origine della pagina e cercare awesome. Un foglio di stile (più un file shim opzionale) è sano. Due diversi numeri di versione è la tua risposta.

Come sono state testate queste correzioni

Ogni test è andato avanti 12 ottobre 2026 nel parco giochi WordPress, un vero WordPress che gira all'interno del browser. Il sito utilizzava WordPress 7.1.3, PHP 8.3 e il tema Twenty Twenty-Five, visualizzato in Chrome. Font Awesome era il gratuito 7.3.1 pacchetto, su cui il progetto è stato pubblicato su GitHub 15 luglio 2026.

Abbiamo creato una pagina di prova delle icone scritte in versione 4, 5 e 7 sintassi. Quindi abbiamo caricato Font Awesome 4.7.0, 5.15.4 e 7.3.1 in diverse combinazioni e ho fatto uno screenshot del risultato. Ogni blocco di codice nelle sezioni testate è stato eseguito prima su quel sito.

Testato: vecchi nomi di classe, un foglio di stile mancante, un indirizzo di foglio di stile non sicuro e due versioni insieme. Mancano anche i file dei caratteri, un CDN bloccato, icone aggiunte nei CSS, Icone solo Pro e Font Awesome di Elementor 4 ambientazione. (Una CDN è una rete di distribuzione di contenuti, il server esterno che ospita i file.)

Non testato: Kit fantastici di caratteri, perché un Kit necessita di un account, e intestazioni di caratteri errate su un server, che Playground non può riprodurre. Queste due sezioni lo dicono e nominano la documentazione su cui fanno affidamento. Inoltre, non abbiamo testato temi a pagamento o page builder diversi dal plugin gratuito di Elementor.

Nomi di vecchie classi in una versione più recente

Carattere fantastico 4 ha scritto ogni icona come fa fa-name. Versione 5 split icons into styles, and versions 6 e 7 changed the syntax again. Font Awesome’s upgrade guide shows the three generations side by side:

<!-- version 4 -->
<i class="fa fa-user"></i>

<!-- version 5 -->
<i class="fas fa-user"></i>

<!-- versions 6 and 7 -->
<i class="fa-solid fa-user"></i>

Does old markup still work under 7.3.1? In parte. With only the main 7.3.1 stylesheet loaded, 3 of our 7 versione 4 icons rendered and 4 mancato.

The pattern is easy to spot. Plain solid icons survive. Outline icons ending in -o go blank, because those names no longer exist. Brand logos written with fa turn into squares, because version 7 keeps brands in a separate font. Versione 5 names such as fas fa-home e fab fa-facebook all rendered without any help.

Before the shim, the two -o names are blank and the two brand names are squares. After adding v4-shims.min.css, renderizzare tutti e quattro. WordPress 7.1.3, testato in WordPress Playground, 12 ottobre 2026.

Correggi A: caricare il file shim v4

Font Awesome fornisce un foglio di stile di compatibilità chiamato v4-shims.min.css. Caricalo dopo il file principale e ogni versione 4 nome nel nostro test reso. Questo è entrato nel tema functions.php (utilizzare un tema figlio, quindi un aggiornamento del tema non lo cancella):

add_action( 'wp_enqueue_scripts', function () {
    $base = 'https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/';
    wp_enqueue_style( 'site-font-awesome', $base . 'all.min.css', array(), null );
    wp_enqueue_style( 'site-font-awesome-v4-shims', $base . 'v4-shims.min.css', array( 'site-font-awesome' ), null );
} );

Mantieni il nome insolito site-font-awesome. WordPress carica solo il primo file registrato con un nome, ed Elementor registra il proprio 4.7.0 copia come font-awesome. Quando abbiamo usato quel nome semplice su una pagina Elementor, WordPress ha caricato Elementor 4.7.0 file e ignorato il nostro.

Preferisco nessun codice? Il plugin ufficiale fa lo stesso lavoro. Su una nuova installazione è Compatibilità con le versioni precedenti l'interruttore era già Su, e la pagina ha caricato un file shim v4 accanto al foglio di stile principale.

Un errore di battitura functions.php può far crollare l'intero sito. Se ciò accade, la nostra guida a riprendendosi da a 500 Errore interno del server procede all'annullamento della modifica.

Correggi B: aggiornare i nomi delle classi

Gli spessori sono una toppa. Se controlli l'HTML, riscrivi il markup una volta e rilascia il file extra:

<i class="fa-regular fa-envelope"></i>
<i class="fa-regular fa-clock"></i>
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>

Le icone del contorno perdono il -o e prendi fa-regular. I loghi del marchio prendono fa-brands. La stessa regola spiega un quadrato in più nel nostro test: fa-solid fa-wordpress mancato, mentre fa-brands fa-wordpress lavorato.

Elementor: Le icone nel tuo codice HTML rimangono vuote

La maggior parte delle guide su questo problema punta a Elementor, quindi abbiamo installato il suo plugin gratuito, versione 4.3.4, su una nuova copia del sito di test. Fuori dalla scatola non ha caricato alcun foglio di stile Font Awesome. Il proprio widget Icona disegnava una stella come SVG in linea, un disegno scritto direttamente nella pagina. Quindi ogni <i> Il tag che abbiamo digitato in un widget HTML è risultato vuoto.

La vecchia impostazione per questo è ancora lì, ed è attivo con una nuova installazione:

1. Vai a Elementor > editore > impostazioni.
2. Apri il Avanzate linguetta.
3. Impostato Carica carattere fantastico 4 Supporto per sì.
4. Clic Salvare le modifiche e ricaricare la pagina.

Dopo di che, la pagina Elementor ha caricato altri tre file. Uno era un Font Awesome Free 5.15.3 foglio di stile in bundle con Elementor; gli altri erano un foglio di stile shim v4 e uno script shim v4. Versione 4 e versione 5 nomi resi.

Elementor 4.3.4 (gratuito). Le ultime due righe utilizzano la versione 7 nomi, quale il bundle 5.15.3 i file non lo so. WordPress 7.1.3, testato in WordPress Playground, 12 ottobre 2026.

Nello stesso test sono emersi due limiti. La copia in bundle è la versione 5, quindi i nomi attuali continuavano a fallire: fa-solid fa-house rimase vuoto e fa-brands fa-wordpress ha tracciato un segno di carattere mancante. E l'impostazione ha raggiunto solo le pagine create con Elementor. Una normale pagina WordPress sullo stesso sito non caricava ancora alcun file Font Awesome.

Serve la versione 7 nomi, o icone esterne alle pagine di Elementor? Lasciare attiva l'impostazione No e caricare 7.3.1 te stesso con lo snippet qui sopra. Questa combinazione ha reso ogni riga della nostra tabella di test, sulla pagina Elementor e su una pagina normale.

Due copie del carattere Awesome caricate insieme

La documentazione di Font Awesome definisce questo il problema più comune riscontrato su WordPress. Un tema raggruppa una versione, un plugin ne raggruppa un altro, and both land on the same page. Can you run version 4 e versione 7 fianco a fianco? Font Awesome’s answer is a flat no, because class names and icon codes overlap.

Our test showed why it’s hard to spot. Nothing vanished. With the plugin loading 7.3.1 and a simulated theme loading 4.7.0 after it, every version 4 icon still appeared. But the page mixed two generations of artwork, e fa fa-facebook drew a different Facebook logo from the one the theme intended. Load order decided the result: the stylesheet loaded last drew the version 4 nomi.

Compare the user and Facebook rows: they change once the 4.7.0 file is blocked. WordPress 7.1.3, testato in WordPress Playground, 12 ottobre 2026.

Correggi A: blocca la copia extra con il plugin

This is the route from the quick answer, and it needs no code. After the scan, il Risoluzione dei problemi tab listed the 4.7.0 stylesheet under Altri temi o plugin. Abbiamo spuntato Bloccare e cliccato Salvare le modifiche. Il 4.7.0 il file era scomparso dall'origine della pagina al caricamento successivo.

Lo scanner dei conflitti ha trovato la seconda copia; selezionare Blocca, quindi Salva modifiche. Plugin Font Awesome 5.2.1 in WordPress 7.1.3, testato in WordPress Playground, 12 ottobre 2026.

La casella dello scanner è visibile solo agli amministratori, e l'elenco rimane finché non lo cancelli.

Correggi B: rimuovilo nel codice

Senza il plug-in, ti serve la maniglia, che è il nome con cui WordPress ha registrato il foglio di stile. Incolla questo functions.php, quindi visualizza l'origine della pagina mentre accedi come amministratore:

add_action( 'wp_print_styles', function () {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    foreach ( wp_styles()->queue as $handle ) {
        $src = wp_styles()->registered[ $handle ]->src;
        if ( false !== stripos( $handle . $src, 'awesome' ) ) {
            echo "<!-- Font Awesome handle: $handle | $src -->\n";
        }
    }
}, 999 );

Nel nostro test è stata stampata una riga per ogni copia, come questo:

<!-- Font Awesome handle: theme-font-awesome | https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css -->

Scambia l'handle che hai trovato nello snippet successivo, quindi elimina il primo. La priorità di 100 lo fa funzionare dopo che il tema ha messo in coda il suo file.

add_action( 'wp_enqueue_scripts', function () {
    wp_dequeue_style( 'theme-font-awesome' );
    wp_deregister_style( 'theme-font-awesome' );
}, 100 );

Ciò ha lasciato una copia sulla nostra pagina. Lo snippet trova solo i file il cui nome o indirizzo contiene “Eccezionale”. Un tema che unisce Font Awesome nel proprio foglio di stile non verrà visualizzato, e il consiglio di Font Awesome è di chiedere allo sviluppatore del tema.

Una trappola nello snippet ufficiale: La pagina di installazione manuale di Font Awesome offre un dispositivo di rimozione dei conflitti più lungo che blocca i file tramite un hash MD5 del loro indirizzo. Il suo elenco di campioni copre font-awesome.css su jsDelivr. Il nostro tema è stato caricato font-awesome.min.css, che ha un hash diverso, e solo l'elenco dei campioni lo ha lasciato sulla pagina. La funzione ha funzionato una volta aggiunto l'hash per il nostro indirizzo.

Se le icone si rompevano subito dopo aver cambiato tema, il nuovo tema probabilmente viene fornito con una propria copia. Non sono sicuro di quale plugin aggiunga il secondo? Il metodo di spegnimento uno per uno nel nostro elenco di common WordPress errors and fixes finds it.

Il foglio di stile non viene mai caricato

Blank icons everywhere mean the browser has no Font Awesome rules at all. We found three ways to get there.

Nothing loads it. You pasted <i> tags from a tutorial, but no theme or plugin on the site includes Font Awesome. (A fresh Elementor install counts, as shown above.) Add it with the enqueue snippet, or install the plugin.

The address starts with http. We queued the stylesheet from an http:// address on an HTTPS page. Chrome refused it, every icon went blank, and the console logged a message that began like this:

Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure stylesheet

Change the address to https://. If the padlock is missing across your whole site, start with our guide to the “site is not secure” avvertimento anziché.

Something blocks the CDN. Ad blockers, privacy extensions and office firewalls can refuse requests to outside servers. Lo abbiamo simulato bloccando l’indirizzo del CDN nel browser. Entrambe le richieste di fogli di stile non sono riuscite, la console ha segnalato il blocco, e ogni icona è diventata vuota.

La soluzione che è sopravvissuta allo stesso blocco è stata l'hosting dei file sul sito stesso. Abbiamo copiato il css e webfonts cartelle dal pacchetto Font Awesome Free in wp-content/uploads/fontawesome/ e li ho caricati da lì:

add_action( 'wp_enqueue_scripts', function () {
    $base = content_url( '/uploads/fontawesome/css/' );
    wp_enqueue_style( 'site-font-awesome', $base . 'all.min.css', array(), '7.3.1' );
    wp_enqueue_style( 'site-font-awesome-v4-shims', $base . 'v4-shims.min.css', array( 'site-font-awesome' ), '7.3.1' );
} );

Con la CDN ancora bloccata, le icone sono tornate. Se solo alcuni visitatori segnalano icone mancanti, questa è la soluzione da provare prima, dal momento che non puoi accedere ai loro browser.

Lo stesso blocco del browser si applica a entrambi i pannelli; solo il secondo serve i file da wp-content/uploads/fontawesome/. WordPress 7.1.3, testato in WordPress Playground, 12 ottobre 2026.

File di caratteri mancanti: Le Piazze Classiche

Il foglio di stile contiene solo le regole. I disegni risiedono in file di caratteri che il foglio di stile cerca nella cartella più in alto, in ../webfonts/. Abbiamo caricato il css cartella senza webfonts, e ogni icona sulla pagina è diventata un quadrato. La console elencava a 404 per ciascun file di caratteri.

Mantieni le due cartelle una accanto all'altra, esattamente come li dispone il download:

wp-content/uploads/fontawesome/
    css/all.min.css
    css/v4-shims.min.css
    webfonts/fa-solid-900.woff2
    webfonts/fa-regular-400.woff2
    webfonts/fa-brands-400.woff2
    webfonts/fa-v4compatibility.woff2

Mettere il webfonts la cartella indietro ha riportato le icone immediatamente. Aspettatevi gli stessi quadrati quando una migrazione o un plug-in di pulizia eliminano i file dei caratteri. Lo fa anche un percorso del tema figlio che punta alla cartella sbagliata.

Un cambiamento cattura gli upgrader. Carattere fantastico 7.0.0, rilasciato il 22 luglio 2025, spedisce i suoi caratteri web solo come file .woff2. Il 6.7.2 il pacchetto conteneva ancora una copia .ttf di ciascun carattere. Quindi il CSS personalizzato che richiede ancora file .ttf o .woff non trova nulla dopo l'aggiornamento.

Le icone aggiunte nei CSS si interrompono sui vecchi nomi dei caratteri

I temi spesso aggiungono icone con CSS anziché <i> tag: un segno di accento circonflesso accanto a una voce di menu, una virgoletta prima di una testimonianza. Quel CSS nomina direttamente il carattere, quindi si rompe quando cambia il nome del carattere. Impostiamo la stessa icona della casa in sei modi sotto 7.3.1.

Ecco la sorpresa: versione 4 e 5 i nomi dei caratteri funzionano ancora, ma la versione 6 il nome no. Il 7.3.1 il foglio di stile definisce il vecchio 4 e 5 nomi e salti 6. Quindi un sito da cui muove 6 per 7 può perdere le sue icone CSS mentre il codice molto più vecchio continua a funzionare.

La riga delineata è la versione 6 nome del carattere, l'unico dei sei che ha fallito 7.3.1. WordPress 7.1.3, testato in WordPress Playground, 12 ottobre 2026.

La soluzione è quella fornita dalla guida all'aggiornamento di Font Awesome. Sostituisci il nome e lo spessore del carattere con una variabile:

.menu-home::before {
    font: var(--fa-font-solid);
    content: "\f015";
}

Tralasciare il peso è il bug più silenzioso. Non rompe l'icona; scambia il solido con il contorno. Un'icona gratuita senza versione struttura è andata peggio: l'icona dell'ingranaggio mostrava un quadrato.

L'icona non è nella tua versione o nel tuo piano

Alcune icone sono vuote da sole mentre il resto della pagina va bene. Allora il problema è il nome, non l'impostazione.

La versione caricata è troppo vecchia. I tutorial attuali utilizzano la versione 7 nomi. Sotto 5.15.4, fa-solid fa-house e fa-brands fa-x-twitter erano entrambi vuoti nel nostro test, e fa-brands fa-wordpress ha tracciato un segno di carattere mancante. Tutti e tre resi sotto 7.3.1. Aggiorna la copia caricata, oppure usa il nome che conosce la tua versione (fas fa-home).

L'icona o lo stile è solo Pro. Elenchi API di Font Awesome 2,163 Icone gratuite per 7.3.1, contando ogni stile separatamente, e 63,765 nel professionista. Con i file gratuiti, fa-light fa-user e fa-solid fa-acorn erano vuoti. Cerca l'icona su fontawesome.com e controlla che sia contrassegnata come Gratis.

Un errore di battitura nel nome. La pagina di risoluzione dei problemi di Font Awesome ammette che anche questo cattura la sua squadra. Una classe senza regola corrispondente non mostra nulla, e non registra alcun errore.

Due cause che non abbiamo potuto testare: Kit e intestazioni di caratteri

Queste correzioni provengono dalla documentazione che continua a leggere 12 ottobre 2026. Non li abbiamo eseguiti.

Un kit che non si carica

Un kit è la configurazione ospitata di Font Awesome: un tag script legato al tuo account. La sua documentazione indica tre cose che ne impediscono il caricamento. Il codice di incorporamento è stato copiato in modo errato. Il sito utilizza l'integrità delle risorse secondarie o una politica di sicurezza dei contenuti, due funzionalità di sicurezza del browser che i kit non supportano. Oppure il Kit è limitato a un elenco di domini che non include il tuo, che puoi modificare con l'icona del globo sotto il nome del Kit.

Il codice di incorporamento dovrebbe corrispondere esattamente a questo modello, con il proprio codice kit inserito:

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

Caratteri serviti da un altro dominio

La documentazione di Font Awesome non copre questa causa, quindi l'abbiamo preso da Mozilla. I browser applicano regole multiorigine ai caratteri Web. Supponiamo che il carattere provenga da un dominio diverso, come il tuo CDN o un sottodominio statico. Deve quindi arrivare con un'intestazione che consenta il tuo sito, come La guida CORS di MDN spiega. Senza di esso il browser blocca il file del carattere.

Su Apache, l'intestazione va in .htaccess file del server che ospita i font. La direttiva è propria di Apache; la regola non è stata testata qui:

<FilesMatch "\.(woff2|woff|ttf)$">
    Header set Access-Control-Allow-Origin "https://www.example.com"
</FilesMatch>

Su nginx, la stessa intestazione appartiene al blocco del server:

location ~* \.(woff2|woff|ttf)$ {
    add_header Access-Control-Allow-Origin "https://www.example.com";
}

Utilizza l'indirizzo del tuo sito reale, e chiedi al tuo host se non puoi modificare nessuno dei due file. Ospitare i caratteri sul dominio del sito evita completamente il problema.

Dove si trova la documentazione dietro il plugin

Le pagine WordPress di Font Awesome dicono che il suo CDN si ferma alla versione 5 e che il plugin si avvii sulla versione 5. La nostra nuova installazione del plugin 5.2.1 detto il contrario. Per impostazione predefinita era Usa CDN, Gratuito, Carattere Web e versione 7.3.1, e si è caricato 7.3.1 dal CDN di Font Awesome. Affidati alla schermata delle impostazioni rispetto al testo della guida precedente.

Evitare che le icone si rompano di nuovo

• Esegui una copia. Dopo aver aggiunto un plugin o cambiato tema, cerca l'origine della pagina awesome ancora.
• Appunta una versione. Un numero fisso come 7.3.1 nell'indirizzo significa che una versione upstream non può modificare le tue icone dall'oggi al domani.
• Ospita i file tu stesso se i visitatori siedono dietro rigidi firewall. Nel nostro test è stata l’unica configurazione che una CDN bloccata non è riuscita a toccare.
• Conservare il file dello spessore fino a quando ogni vecchio nome di classe non verrà riscritto, quindi rimuoverlo.
• Carica di meno. Font Awesome dice all.css è troppo grande per i siti di produzione e consiglia di caricare solo gli stili che usi.

Anche quest’ultimo punto è importante per la velocità. I caratteri delle icone sono una voce frequente nell'elenco di risorse di blocco del rendering in WordPress, e tagliarli aiuta entrambi i problemi.

Domande frequenti

Perché le icone di Font Awesome vengono visualizzate come quadrate?

Il foglio di stile è stato caricato, ma il browser non è riuscito a disegnare il carattere. Nel nostro test ciò è accaduto in tre casi. Mancavano i file dei caratteri, un'icona del marchio utilizzata fa o fa-solid, o CSS chiamato il “Carattere fantastico 6 Gratuito” carattere in base alla versione 7. Controlla la console 404 prima gli errori.

Perché le mie icone sono scomparse dopo un aggiornamento di un tema o di un plug-in?

Molto probabilmente l'aggiornamento ha cambiato la versione di Font Awesome caricata. Nomi di vecchie classi come fa fa-envelope-o vai vuoto sotto le versioni 5 per 7 a meno che non venga caricato un file shim. Accendi Compatibilità con le versioni precedenti nel plugin ufficiale, o aggiungi v4-shims.min.css.

Posso usare Font Awesome 4 e 7 sullo stesso sito?

No. Font Awesome lo sconsiglia perché i nomi delle classi e i codici delle icone entrano in conflitto. Nel nostro test entrambe le versioni insieme hanno prodotto artwork contrastanti e un logo Facebook sbagliato. Blocca la copia precedente e carica il file shim v4, che mantiene in funzione i vecchi nomi.

Ho bisogno del plugin Font Awesome, oppure posso aggiungere il codice da solo?

Entrambi funzionano. Il plugin (versione 5.2.1, 400,000+ installazioni attive su WordPress.org) caricato 7.3.1 con il file shim per impostazione predefinita nel nostro test. Aggiunge anche lo scanner dei conflitti. Il percorso del codice è un breve snippet functions.php e si adatta a un sito che ospita i propri file.

L'ordine di provare le cose

Inizia con ciò che puoi vedere. Vuoto ovunque: ottieni il caricamento di un foglio di stile su HTTPS. Piazze ovunque: metti il webfonts cartella indietro. Alcune icone rotte: caricare il file shim v4, quindi correggi i prefissi del marchio. Icone non corrispondenti: cercane una seconda copia e bloccala. Ospita autonomamente i file se una rete continua a bloccare la CDN.

Guide correlate: se si rompessero più delle icone, lavorare attraverso il 500 guide agli errori e agli errori comuni collegate sopra. Per pagine lente, la guida al blocco del rendering è la tappa successiva.