Icônes Elementor qui ne s’affichent plus : réparer les carrés vides 🔧

Le menu mobile n’a plus son « hamburger », les puces des listes d’icônes sont remplacées par de petits rectangles, les logos des réseaux sociaux du pied de page ont disparu et les flèches des carrousels ne s’affichent plus. Le texte, lui, est intact. Ce symptôme typique d’Elementor se répare presque toujours sans toucher au contenu des pages.

Si vous préférez ne pas manipuler les réglages vous-même, notre équipe s’en charge à distance via notre service de réparation WordPress.

Pourquoi les icônes Elementor s’affichent-elles en carrés vides ?

Les icônes s’affichent en carrés parce que le navigateur reçoit le code de l’icône mais pas la police qui sait la dessiner. Dans Elementor, les icônes classiques (bibliothèques Font Awesome et eicons) sont des caractères d’une police spéciale : une police d’icônes, c’est-à-dire un fichier .woff2 qui contient des pictogrammes à la place des lettres. S’il ne se charge pas, le navigateur affiche un carré ou rien du tout.

Voici les causes que nous rencontrons, de la plus fréquente à la plus rare :

• Une extension de cache ou d’optimisation (WP Rocket, LiteSpeed Cache, Autoptimize, etc.) qui combine, minifie ou « nettoie » le CSS et casse le chemin vers les polices.
• Un changement d’adresse du site (passage en HTTPS, nouveau domaine, ajout ou retrait du « www », CDN) : les fichiers CSS générés par Elementor pointent encore vers l’ancienne adresse, ou le navigateur bloque les polices venues d’un autre domaine.
• Des icônes Font Awesome 4 restées dans d’anciens widgets ou modules complémentaires, alors que le site ne charge plus que la version récente.
• L’option « Polices d’icônes inline » d’Elementor, qui remplace les polices par des images SVG intégrées dans la page, que certains thèmes ou modules qui attendent l’ancienne balise <i> ne savent pas afficher.
• Des fichiers manquants ou inaccessibles après une mise à jour interrompue, une migration incomplète ou une règle de sécurité trop stricte (pare-feu, en-tête Content-Security-Policy).

Comment savoir quelle cause bloque vos icônes ?

La console et l’onglet Réseau du navigateur donnent la cause exacte en moins de cinq minutes. Ouvrez la page en navigation privée dans Chrome, Edge ou Firefox, puis appuyez sur F12 (ou Cmd + Option + I sur Mac) pour ouvrir les outils de développement.

1. Dans l’onglet Console, rechargez la page et cherchez les messages en rouge qui parlent de « font ».
2. Dans l’onglet Réseau (Network), cliquez sur le filtre Police (Font), puis rechargez la page. La liste des fichiers .woff2 demandés s’affiche avec leur code de réponse.
3. Repérez les lignes en rouge ou dont le code n’est pas 200. Un 404 signifie que le fichier n’existe pas à cette adresse, un 403 qu’il est bloqué par le serveur.

Les messages les plus courants, et l’étape qui y répond :

Access to font at 'https://exemple.fr/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2'
from origin 'https://www.exemple.fr' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to decode downloaded font: https://exemple.fr/.../eicons.woff2
OTS parsing error: invalid sfntVersion: 1008813135

Refused to load the font '...' because it violates the following
Content Security Policy directive: "font-src 'self'".

• « blocked by CORS policy » : la police est appelée depuis une autre adresse que celle de la page. Voir l’étape 4.
• « Failed to decode downloaded font » avec « invalid sfntVersion: 1008813135 » : le serveur a renvoyé une page HTML au lieu de la police (ce nombre correspond au début de <!DOCTYPE). Voir les étapes 2 et 6.
• « violates the following Content Security Policy directive » : un en-tête de sécurité interdit les polices. Voir l’étape 6.
• Aucune erreur, mais aucun fichier de police chargé : l’icône est en Font Awesome 4 ou l’option d’icônes inline est en cause. Voir les étapes 3 et 5.

Pour vérifier qu’un fichier existe vraiment, ouvrez directement son adresse dans un onglet. Sur une installation standard, les polices d’Elementor se trouvent ici :

/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2
/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff2
/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2
/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2

Si le navigateur télécharge le fichier, il est présent ; une page 404 signifie qu’il manque.

Comment réparer les icônes Elementor étape par étape ?

Sauvegardez d’abord les fichiers et la base de données, puis suivez les étapes dans l’ordre en testant la page en navigation privée après chacune.

1. Videz tous les caches, puis régénérez les fichiers d’Elementor

Elementor écrit le style de chaque page dans des fichiers CSS stockés dans wp-content/uploads/elementor/css/. Ils peuvent garder de vieux chemins après une mise à jour. Allez dans Elementor > Outils, onglet Général, et cliquez sur Effacer les fichiers et les données dans la ligne « Cache Elementor ». Videz ensuite le cache de votre extension, de l’hébergeur et du CDN (Cloudflare, par exemple). Avec WP-CLI, l’outil en ligne de commande de WordPress, la commande suivante fait la même chose et recrée les fichiers :

wp elementor flush-css --regenerate
wp cache flush

2. Désactivez temporairement l’optimisation du CSS

C’est la cause la plus fréquente. Dans votre extension d’optimisation, désactivez une à une la minification, la combinaison des fichiers CSS et la « suppression du CSS inutilisé », en vidant le cache à chaque fois. Quand les icônes reviennent, réactivez l’option en excluant les fichiers d’icônes d’Elementor :

/wp-content/plugins/elementor/assets/lib/font-awesome/(.*)
/wp-content/plugins/elementor/assets/lib/eicons/(.*)
/wp-content/uploads/elementor/css/(.*)

Sinon, désactivez toutes les extensions sauf Elementor et Elementor Pro, puis réactivez-les une par une :

wp plugin list --status=active
wp plugin deactivate wp-rocket litespeed-cache autoptimize
# testez, puis :
wp plugin activate wp-rocket

Adaptez les noms (slugs) à ceux affichés par wp plugin list. Vérifiez aussi les options de préchargement ou d’hébergement local des polices, qui réécrivent parfois leurs adresses.

3. Activez la prise en charge de Font Awesome 4

Les icônes choisies avant le passage d’Elementor à Font Awesome 5 portent d’anciens noms (par exemple fa fa-facebook) et ne s’affichent plus sans script de compatibilité. Allez dans Elementor > Réglages, onglet Avancé, passez Charger la prise en charge de Font Awesome 4 sur Oui, puis enregistrez et videz les caches. Ce script (shim.js) traduit les anciens noms. À terme, choisissez à nouveau l’icône dans chaque widget concerné pour pouvoir le désactiver.

4. Corrigez l’adresse du site et le blocage CORS

CORS (Cross-Origin Resource Sharing) est la règle qui empêche un navigateur de charger une police venue d’un autre domaine que la page, sauf autorisation explicite du serveur. Commencez par vérifier dans Réglages > Général que l’adresse de WordPress et l’adresse du site sont identiques et en https. Si l’ancienne adresse traîne encore, allez dans Elementor > Outils, onglet Remplacement d’URL, indiquez l’ancienne puis la nouvelle adresse, et relancez « Effacer les fichiers et les données ». Le contenu mixte (des fichiers appelés en http sur une page en https) produit les mêmes symptômes, nous l’expliquons dans notre fiche sur le contenu mixte.

wp option get home
wp option get siteurl
wp elementor replace-urls http://www.exemple.fr https://www.exemple.fr
wp elementor flush-css --regenerate

Si les polices sont servies par un CDN ou depuis l’adresse sans « www », autorisez-les explicitement. Sur un serveur Apache, ajoutez ce bloc au début du fichier .htaccess à la racine du site (après l’avoir sauvegardé) :

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Sur Nginx, l’équivalent se place dans la configuration du serveur :

location ~* \.(eot|ttf|otf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin "*";
}

5. Testez l’option « Polices d’icônes inline »

Dans Elementor > Réglages, onglet Fonctionnalités, l’option Polices d’icônes « inline » diffuse les icônes sous forme de SVG intégrés à la page, sans charger les bibliothèques Font Awesome et eicons. Si des icônes ont disparu juste après son activation, passez-la sur Inactif, enregistrez, puis effacez les fichiers et les données. À l’inverse, l’activer contourne une police qui reste bloquée, puisqu’il n’y a plus de fichier à télécharger. En WP-CLI, le nom technique de cette option est e_font_icon_svg :

wp elementor experiments deactivate e_font_icon_svg
wp elementor flush-css --regenerate

6. Remplacez les fichiers manquants et vérifiez les règles de sécurité

Des 404 sur les fichiers .woff2 à la bonne adresse signifient que les fichiers d’Elementor sont incomplets, souvent après une mise à jour interrompue. Réinstallez la même version de l’extension par-dessus l’ancienne : vos pages ne sont pas touchées, car leur contenu est stocké dans la base de données. Relevez d’abord la version installée :

wp plugin get elementor --field=version
wp plugin install elementor --version=4.3.5 --force

Remplacez 4.3.5 par le numéro affiché par la première commande. Sans WP-CLI, remplacez le dossier wp-content/plugins/elementor par FTP avec la même version téléchargée sur wordpress.org. Si l’erreur est un 403 ou un message « Content Security Policy », regardez du côté du pare-feu de l’hébergeur ou de votre extension de sécurité : l’en-tête Content-Security-Policy doit autoriser vos polices, par exemple avec font-src 'self' data:, en ajoutant les domaines de votre CDN si vous en utilisez un.

Comment éviter que vos icônes disparaissent à nouveau ?

La meilleure prévention consiste à tester chaque mise à jour et chaque changement de réglage d’optimisation sur une copie du site avant de l’appliquer en production.

• Mettez à jour Elementor et Elementor Pro ensemble, jamais l’un sans l’autre, puis cliquez sur « Effacer les fichiers et les données ».
• Après un changement de domaine ou un passage en HTTPS, utilisez toujours l’outil de remplacement d’URL d’Elementor.
• Après chaque réglage d’optimisation du CSS, contrôlez le menu mobile et le pied de page.
• Remplacez progressivement les icônes Font Awesome 4 par leurs équivalents récents.

Si vos modifications Elementor ne s’affichent pas du tout, et pas seulement les icônes, notre guide sur les modifications Elementor qui ne s’affichent pas traite le problème plus largement. Et si la panne est apparue juste après une mise à jour générale, lisez aussi notre guide sur le site cassé après une mise à jour.

Quand faire appel à un professionnel ?

Faites appel à un professionnel si les icônes manquent toujours après les six étapes, si vous n’avez pas accès au FTP ou au .htaccess, ou si la panne touche une boutique en ligne dont vous ne pouvez pas arrêter les ventes. C’est aussi le cas quand les icônes ont disparu en même temps que d’autres éléments de la mise en page : une mise en page cassée après une mise à jour du thème ou du constructeur demande en général 1 à 2 heures d’intervention, soit 70 à 140 € TTC au tarif normal (voir nos tarifs). D’autres pannes courantes sont décrites dans notre rubrique Résoudre une panne.

Sources : documentation WP-CLI d’Elementor (flush-css), replace-urls, experiments deactivate, aide Elementor sur les polices d’icônes inline, MDN : CORS.