# Inline Font Icons : ne plus charger Font Awesome en entier avec Elementor > L'expérience Inline Font Icons d'Elementor injecte chaque icône utilisée en SVG directement dans le HTML, au lieu de charger toute la police Font Awesome. - Auteur : Clément Hadrot - Publié le : 2022-09-05 - Mis à jour le : 2022-09-05 - Catégorie : Elementor - URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/inline-font-icons-elementor-font-awesome/ ## L’essentiel - Sans cette option, une seule icône peut déclencher le chargement de toute une police - Le SVG inline supprime une requête réseau et le flash d'icône invisible - Les icônes de widgets tiers ne sont pas toujours compatibles avec ce mode Sur un site vitrine récent, l'audit Lighthouse pointait un fichier de 240 Ko chargé uniquement pour afficher trois pictogrammes dans le pied de page : une icône Facebook, une icône Instagram, une icône téléphone. C'est le comportement par défaut d'Elementor avec les icônes issues de Font Awesome ou d'eicons : la police complète est chargée dès qu'une seule icône de la bibliothèque est utilisée quelque part sur la page, qu'il y en ait une ou cinquante. L'expérience **Inline Font Icons**, disponible dans le panneau Experiments d'Elementor, corrige ce problème à la racine en changeant complètement la méthode de rendu des icônes. ## Le problème du chargement de police complète Par défaut, un contrôle Icône d'Elementor génère une balise `` avec une classe CSS Font Awesome (par exemple `fa fa-facebook`), qui dépend d'une feuille de style `@font-face` chargeant l'intégralité du jeu d'icônes, souvent plusieurs centaines de glyphes, pour n'en afficher qu'une poignée réellement utilisée. ``` ``` ## Ce que change Inline Font Icons Une fois cette expérience activée dans **Elementor > Réglages > Expériences**, chaque icône est rendue directement en SVG inline dans le HTML de la page, sans passer par une police externe : ``` ``` Le gain est double : plus aucune requête réseau vers un fichier de police, et disparition du léger flash d'icône invisible pendant le chargement (l'équivalent, pour les icônes, du FOIT observé sur les polices de texte). > L'essentiel à retenir : Sans cette option, une seule icône peut déclencher le chargement de toute une police ; Le SVG inline supprime une requête réseau et le flash d'icône invisible ; Les icônes de widgets tiers ne sont pas toujours compatibles avec ce mode ## Mesurer le gain réel Sur le site vitrine mentionné en introduction, l'activation de cette expérience a fait disparaître le chargement de la police Font Awesome complète (autour de 210 Ko compressés, police et CSS associés), remplacée par quelques centaines d'octets de SVG directement intégrés au HTML déjà transféré. Le gain est proportionnellement plus important sur les pages qui n'utilisent que quelques icônes éparses, ce qui est le cas de la majorité des sites vitrines. | Mode | Requête réseau dédiée | Poids pour 3 icônes | | --- | --- | --- | | Police Font Awesome classique | Oui, fichier complet | ~210 Ko | | Inline Font Icons (SVG) | Non, inclus dans le HTML | Quelques Ko | ## Gérer les icônes personnalisées importées Les jeux d'icônes importés via Custom Icons (Fontello, IcoMoon) restent compatibles avec ce mode, à condition que le zip source contienne bien les fichiers SVG individuels attendus par Elementor, ce qui est le cas standard pour ces deux générateurs. ## Le point d'attention : les widgets tiers Certains plugins d'addons Elementor plus anciens construisent leur propre balisage d'icône directement en PHP, sans passer par le contrôle Icône standard d'Elementor. Dans ce cas, l'activation d'Inline Font Icons n'a aucun effet sur ces widgets spécifiques : ils continuent de charger la police complète en parallèle, ce qui annule une partie du gain espéré si le site en dépend fortement. - Vérifier, après activation, que les icônes des widgets tiers utilisés s'affichent toujours correctement. - Inspecter le poids réel de la page dans les outils de développement pour confirmer la disparition du fichier de police, plutôt que de se fier uniquement à l'apparence visuelle. - Signaler aux éditeurs de plugins tiers non compatibles, certains ayant depuis mis à jour leurs widgets pour suivre ce standard. > Sur nos projets, l'activation d'Inline Font Icons fait désormais partie de notre Kit de base, testée systématiquement avec les widgets tiers réellement utilisés avant chaque mise en production. ## En résumé Inline Font Icons résout un problème de performance très répandu et pourtant peu visible sans un audit réseau détaillé : le chargement d'une police d'icônes complète pour n'en afficher qu'une poignée. Le gain est net dès que le site utilise des icônes avec parcimonie, mais il reste soumis à la compatibilité des widgets tiers avec le rendu SVG natif d'Elementor, un point à vérifier systématiquement avant activation en production.