Les icônes Elementor disparaissent pour des raisons prévisibles. Les fichiers CSS manquants, les données de plugins obsolètes, les conflits de cache, les incompatibilités HTTPS et les restrictions du serveur sont les causes les plus fréquentes sur les sites WordPress aux États-Unis et dans le monde.
Ce guide couvre toutes les causes et la solution exacte pour chacune d'elles, afin que vous puissiez restaurer vos icônes sans tâtonnement.
Il arrive que les icônes Elementor ne s'affichent pas correctement en raison de bibliothèques d'icônes manquantes, de fichiers de plugins obsolètes, de conflits de cache, de permissions de fichiers incorrectes ou de problèmes de chargement des polices. Pour résoudre ce problème, il faut généralement régénérer les ressources Elementor, vider le cache, mettre à jour les plugins et vérifier que les fichiers de polices d'icônes se chargent correctement. L'utilisation des outils de développement du navigateur peut également permettre d'identifier les ressources bloquées ou les erreurs de chargement qui empêchent l'affichage des icônes.
Qu'est-ce que la boîte à icônes dans Elementor ?
L'Icon Box est un Elementor qui combine une icône, un titre et une description en un seul élément. Il permet de mettre en valeur des fonctionnalités, des services ou des informations clés sur n'importe quelle page. Compatible avec Font Awesome, Material Design et les bibliothèques d'icônes personnalisées, il vous permet d'ajuster sa taille, sa couleur et son emplacement directement dans l'éditeur Elementor, sans modifier le code.
Voici ce que vous pouvez faire avec la boîte à icônes :
- Choisissez votre icône : que vous préfériez celles de Font Awesome, de Material Design ou que vous ayez une icône unique, le choix vous appartient.
- Personnalisez-la : Vous souhaitez une icône plus grande ? Une autre couleur ? Aucun problème. Vous pouvez ajuster sa taille, modifier sa teinte et tester différentes apparences. De plus, vous pouvez rédiger votre titre et votre description.
- Glissez, déposez et c'est fait : pas besoin d'être un expert en informatique ! Il vous suffit de glisser le widget Icon Box à l'endroit souhaité sur votre page ou article, et le tour est joué.
Les icônes Elementor ne s'affichent toujours pas ? Pas de panique !
Notre équipe d'experts WordPress peut vous aider à résoudre ce problème. Contactez-nous dès aujourd'hui.
Vous rencontrez des difficultés avec les icônes dans Elementor ? Voici une liste de vérification pour vous aider
Si vos icônes ne sont pas visibles, suivez cette liste de vérification rapide pour identifier l'erreur possible et les rétablir avant d'essayer des solutions plus avancées.
- Mise à jour d'Elementor : Tout comme les applications de votre téléphone, les logiciels nécessitent parfois une mise à jour. Assurez-vous que votre installation d'Elementor est à jour.
- Vérifiez la bibliothèque d'icônes : accédez à Elementor, puis à Paramètres, puis à Avancé, et assurez-vous que l'option Font Awesome est activée. Si elle est désactivée, les icônes ne s'afficheront pas, quels que soient les autres paramètres.
- Testez les conflits de plugins ou de thème : désactivez temporairement vos autres plugins et passez à un thème WordPress par défaut, tel que Twenty Twenty-Four. Si les icônes réapparaissent, réactivez les plugins un par un pour identifier le conflit.
- Vider tous les caches : videz le cache de votre navigateur et celui de votre plugin de cache. Régénérez également les fichiers d’Elementor via Elementor > Outils > Régénérer les fichiers et les données pour garantir le chargement des ressources les plus récentes.
- Testez avec un autre navigateur : le chargement des polices varie selon les navigateurs. Testez votre page avec Chrome, Firefox et Safari pour déterminer si le problème est lié à un navigateur en particulier ou s’il concerne l’ensemble du site.
- Vérifiez les paramètres de votre CDN : si vous utilisez un CDN, il se peut qu’il bloque les fichiers de police dont dépendent les icônes Elementor. Désactivez temporairement le CDN et vérifiez si les icônes se chargent. Si c’est le cas, contactez votre fournisseur de CDN pour autoriser les types de fichiers de police requis.
Conseils pour résoudre le problème d'affichage des icônes Elementor
Il peut être déconcertant de constater que les icônes personnalisées d'Elementor décident de jouer à cache-cache sur votre site web.
La plupart des problèmes d'icônes d'Elementor sont dus à deux causes principales : des modifications récentes du plugin qui affectent le chargement des icônes, ou l'absence totale d'icônes dans la bibliothèque. Les solutions ci-dessous règlent ces deux problèmes.
- Modifications apportées au plugin Elementor : les modifications, mises à jour ou personnalisations récentes peuvent nécessiter l’affichage correct des icônes. Cela peut être dû à des conflits ou à des paramètres incompatibles.
- Icônes manquantes dans la bibliothèque : Il arrive que des icônes de la bibliothèque soient manquantes ou non chargées, ce qui les fait disparaître de vos mises en page.
Maintenant que nous avons identifié les coupables probables, passons en revue les solutions pour remettre vos icônes sur le devant de la scène.
Problème n° 1 : Modifications apportées au plugin Elementor
Il se peut que vous ayez récemment mis à jour ou installé le plugin Elementor, et que certaines icônes Font Awesome ne s'affichent plus.
Voici ce que vous pouvez faire :
- Accédez à votre tableau de bord WordPress.
- Choisissez « Elementor » dans la barre latérale, puis sélectionnez « Paramètres »
- Cliquez sur l'onglet « Avancé ».
- Recherchez l'option « Charger la prise en charge de Font Awesome 4 ». Activez-la ou assurez-vous qu'elle est activée.
Problème n° 2 : Fichiers CSS et de données Elementor obsolètes
Il arrive que les icônes Elementor ne se chargent pas car les fichiers CSS générés deviennent obsolètes ou corrompus suite à une mise à jour de plugin ou une modification de configuration. Dans ce cas, les styles de police des icônes peuvent ne pas se charger correctement, ce qui les rend blanches ou invisibles sur la page.
Heureusement, Elementor propose une solution rapide à ce problème. Suivez ces étapes pour régénérer les fichiers :
- Accédez à votre tableau de bord WordPress et ouvrez Elementor.
- Cliquez sur Outils dans le menu.
- Sous l' Général , sélectionnez Régénérer les fichiers et les données.
- Cliquez sur le bouton et autorisez Elementor à actualiser les données.
Ce processus reconstruit les fichiers CSS stockés dans la base de données et met à jour les ressources utilisées pour afficher les icônes. Une fois ces étapes terminées, rechargez votre page et vérifiez si les icônes sont désormais visibles.
Dans de nombreux cas, cette simple solution résout l'erreur sans nécessiter de dépannage supplémentaire.
Problème 3 : Contenu mixte ou problèmes de configuration HTTPS
Une autre raison fréquente pour laquelle les icônes n'apparaissent pas est un problème de contenu mixte. Cela se produit lorsque votre site web se charge via HTTPS, mais que certains fichiers d'icônes ou ressources de polices sont également demandés via HTTP.
Les navigateurs modernes bloquent ces requêtes pour des raisons de sécurité, ce qui empêche le chargement des icônes.
Commencez par vérifier l'adresse WordPress et l'adresse du site dans vos paramètres généraux pour vous assurer qu'elles utilisent toutes deux une URL HTTPS correcte. En cas de différence, mettez à jour les paramètres et enregistrez les modifications.
Vous pouvez également inspecter la page à l'aide des outils de développement de votre navigateur afin de repérer les ressources bloquées. Si des fichiers d'icônes sont bloqués, mettez à jour les URL correspondantes dans votre base de données ou les paramètres de votre extension.
Une fois toutes les ressources chargées via HTTPS, les icônes devraient redevenir visibles.
Problème 4 : Problèmes d’autorisation de fichiers ou de configuration du serveur
Dans certains cas, le problème peut provenir de votre hébergement ou de la configuration de votre serveur. Les icônes Elementor utilisent des fichiers de police tels que les formats WOFF et TTF. Si le serveur bloque ces types de fichiers ou si les permissions sont incorrectes, les icônes risquent de ne pas s'afficher correctement.
Pour résoudre ce problème, vérifiez les permissions des fichiers dans votre installation WordPress, notamment dans les dossiers contenant les ressources Elementor. Les permissions doivent autoriser le serveur à accéder à ces fichiers.
Vous pouvez également contacter votre hébergeur pour vérifier que les fichiers de polices ne sont pas soumis à des restrictions de sécurité. Certains serveurs bloquent par défaut certaines ressources, ce qui peut entraîner l'affichage d'icônes vides.
Une fois que le serveur aura autorisé l'accès aux fichiers requis, les icônes Elementor devraient se charger normalement sur le menu et les pages de votre site web.
Problème n° 5 : Les icônes disparaissent de la bibliothèque
Il arrive que des icônes disparaissent de la bibliothèque d'icônes Elementor, notamment dans les modèles qui utilisent des icônes « Nucleo Mini ».
Voici comment vérifier et résoudre ce problème :
- Rendez-vous sur la page où vos icônes devraient apparaître.
- Cliquez sur le bouton « Modifier avec Elementor » pour lancer l'éditeur Elementor.
- Ouvrez ensuite la bibliothèque multimédia. Vous pourrez ainsi vérifier si l'icône recherchée s'y trouve.
- Si l'icône souhaitée est manquante, vous devez mettre à jour votre plugin Kava Extra vers la dernière version pour résoudre le problème.
Alternative au plugin Font Awesome
Si les solutions ci-dessus ne permettent pas de restaurer vos icônes, vous pouvez essayer une autre méthode : installer directement le plugin Font Awesome
- Dans votre panneau d'administration WordPress, accédez à Extensions → Ajouter → Téléverser une extension.
- Vous aurez ici la possibilité de télécharger le plugin Font Awesome que vous avez téléchargé sur votre ordinateur.
- Cliquez sur le bouton « Installer maintenant ».
- Une fois l'installation terminée, n'oubliez pas de cliquer sur le bouton « Activer le plugin ».
- Le plugin Font Awesome devrait maintenant être activé sur votre site, et vos icônes devraient à nouveau fonctionner.
Sauvegardez toujours votre site avant d'effectuer des modifications ou des mises à jour importantes. En cas d'imprévu, vous disposerez ainsi d'une solution de secours.
Conclusion : Corrigez les icônes Elementor et assurez-vous qu’elles fonctionnent correctement
L'absence d'icônes dans Elementor est presque toujours due à l'une des cinq causes suivantes : paramètres de plugin obsolètes, fichiers CSS périmés, conflits HTTPS, restrictions du serveur ou icônes de bibliothèque manquantes.
Suivez les instructions ci-dessous et vous résoudrez le problème dans la plupart des cas sans avoir à contacter l'assistance. Si le problème persiste, l'installation directe de l'extension Font Awesome offre une solution de repli fiable, indépendante du système de chargement d'icônes intégré à Elementor.
FAQ concernant la résolution du problème d'affichage des icônes Elementor
Pourquoi les icônes Elementor ne sont-elles pas visibles sur mon site WordPress ?
Il se peut que les icônes Elementor ne s'affichent pas en raison de problèmes de cache, d'une adresse WordPress ou de site incorrecte, ou de problèmes de compatibilité avec des plugins ou des extensions. Parfois, la police d'icônes ne se charge pas à cause d'une URL erronée, de ressources HTTPS bloquées ou de fichiers de base de données obsolètes. Si cela se produit pour la première fois, videz le cache et suivez les étapes décrites dans ce tutoriel pour restaurer les icônes et les rendre à nouveau visibles.
Comment résoudre le problème d'affichage des icônes Elementor après la connexion ?
Après vous être connecté à votre tableau de bord WordPress, ouvrez les paramètres d'Elementor et régénérez les fichiers CSS. Cette action actualise les données enregistrées et corrige de nombreuses erreurs de chargement d'icônes. Vous pouvez également vider le cache de votre site depuis votre panneau d'hébergement ou votre extension de cache. Dans la plupart des cas, ces deux méthodes permettent de résoudre rapidement le problème.
Un problème de cache peut-il expliquer que les icônes Elementor apparaissent vides ?
Oui. Un problème de cache empêche souvent le chargement des nouvelles icônes. Lorsque les fichiers en cache sont obsolètes, les icônes peuvent apparaître vides ou manquantes. Videz le cache de votre navigateur, de vos extensions et de votre CDN. Une fois les anciennes données actualisées, les icônes devraient redevenir visibles.
Les conflits entre plugins ou extensions affectent-ils les icônes d'Elementor ?
Oui. Certains modules complémentaires Elementor ou plugins tiers peuvent engendrer des problèmes de compatibilité et empêcher le chargement des icônes. Désactivez les plugins un par un depuis le menu pour identifier le conflit. Une fois le plugin problématique identifié, mettez-le à jour ou remplacez-le.
Que dois-je vérifier si l'erreur persiste ?
Si l'erreur persiste après avoir suivi les étapes ci-dessus, vérifiez l'adresse WordPress et les paramètres d'adresse du site, confirmez la configuration HTTPS correcte et examinez les données de la base de données.
