Après la refonte graphique de novembre 2025, puis le grand nettoyage de printemps de mai 2026, le chantier Fluent 2 se poursuit sur Team-Azerty. Cette fois, on s'attaque aux icônes !

Depuis la refonte graphique de 2016, Font Awesome s'était progressivement installé un peu partout sur le site. Au départ, quelques pictogrammes ajoutés ici et là, puis de plus en plus d'utilisations au fil des évolutions. Résultat : une intégration devenue assez artisanale, avec des classes dispersées dans le code et plusieurs fichiers à charger.

En mai 2025, j'avais déjà consacré une actualité à un premier grand coup de propre sur cette intégration, devenue au fil du temps un peu... disons, sportive à maintenir. (Un grand coup de propre sur l'intégration des icônes Font Awesome).

Mais avec la poursuite de la modernisation du site, l'occasion était trop belle pour aller un peu plus loin : remplacer Font Awesome par une solution plus légère, tout en repensant la manière dont les icônes sont gérées dans le code.

À la recherche de nouveaux pictogrammes

Avant de choisir un remplaçant, il a fallu faire un petit tour d'horizon des bibliothèques disponibles. Mon choix s'est porté sur le site iconify.design. Plusieurs collections ont été examinées, notamment Fluent UI System Icons, Phosphor, Lucide et Line MD.

Le choix principal s'est finalement porté sur Fluent UI System Icons, dont le style s'intègre naturellement à la nouvelle identité graphique du site. Certaines icônes absentes de cette collection ont été complétées ponctuellement avec d'autres jeux de pictogrammes. L'objectif n'était pas de s'enfermer dans une bibliothèque unique, mais de trouver le meilleur compromis entre cohérence visuelle, disponibilité et légèreté.

170 icônes passées au crible !

Mais avant de remplacer quoi que ce soit, encore fallait-il savoir où se cachaient toutes ces icônes ! Et après dix années d'utilisation, elles étaient plutôt bien disséminées.

On en retrouvait dans les menus et les fils d'Ariane, dans les templates, dans les traitements du HTML, mais aussi directement dans les pages PHP et les interfaces d'administration. Certaines étaient appelées avec des classes Font Awesome classiques, d'autres au travers de traitements plus spécifiques ou d'anciennes appellations.

J'ai donc commencé par développer un outil chargé de parcourir les fichiers PHP pour recenser les classes Font Awesome réellement utilisées. Il se charge notamment de reconnaître les différentes variantes, de regrouper les anciennes appellations de Font Awesome 5 et 6 et de constituer une table de correspondance. Cette étape a permis d'établir un inventaire fiable des quelque 170 icônes utilisées sur le site.

Mais plutôt que de remplacer simplement une bibliothèque par une autre, j'ai préféré profiter de ce chantier pour revoir complètement la façon dont les icônes sont gérées.

Une classe pour les gouverner toutes !

Jusqu'à présent, le code du site connaissait directement Font Awesome : il fallait écrire ses classes CSS, les rechercher dans le DOM ou encore les manipuler dans les templates. Autant de dépendances qui compliquaient chaque évolution.

J'ai donc créé une classe PHP centralisée, baptisée tout simplement Icon. Son principe est assez simple : le reste du site n'a plus besoin de connaître la bibliothèque graphique utilisée. Il fait désormais appel à des noms logiques, comme user, lock ou file-pdf, et c'est la classe Icon qui se charge de faire la correspondance avec le pictogramme réellement utilisé.

Cette classe centralise également la génération du HTML, la gestion des classes CSS supplémentaires, les attributs d'accessibilité et les mécanismes permettant aux templates de reconnaître les icônes, notamment lors des recherches dans le DOM.

Autrement dit, si demain Fluent ne fait plus l'affaire et qu'une autre bibliothèque lui succède, il ne sera plus nécessaire de repartir à la chasse aux icônes dans des centaines de fichiers. Il suffira principalement de modifier la table de correspondance et les quelques éléments propres à la nouvelle collection. Le reste du site continuera à utiliser les mêmes noms logiques.

Une migration automatisée, mais pas à l'aveugle

Une fois cette nouvelle architecture en place, restait à migrer l'existant. Et avec des icônes présentes dans de nombreux fichiers, le remplacement manuel aurait été particulièrement fastidieux.

Un deuxième outil a donc été développé pour transformer automatiquement les anciennes écritures Font Awesome en appels à la nouvelle classe Icon. Il analyse le code PHP pour identifier les contextes dans lesquels une icône peut être remplacée sans risque.

Ce n'est pas un simple rechercher/remplacer : l'outil tient compte de la structure du code et évite notamment de modifier les chaînes utilisées dans des recherches, des expressions XPath, des paramètres de fonctions ou d'autres traitements particuliers. Il propose également un mode simulation pour examiner les modifications avant de les appliquer.

Et parce qu'une automatisation n'est jamais totalement à l'abri d'une mauvaise surprise, un troisième outil a été prévu pour gérer les retours arrière. Les fichiers originaux sont sauvegardés en dehors du répertoire public du site, puis leur empreinte est vérifiée avant toute restauration. Cela permet de revenir sur une modification sans écraser d'éventuelles interventions manuelles réalisées entre-temps.

La migration a ainsi pu être menée progressivement, des menus et données de navigation jusqu'aux classes centrales, aux pages métier et aux templates. Un chantier assez conséquent, mais qui laisse derrière lui une architecture bien plus propre et surtout beaucoup plus facile à faire évoluer.

Un régime minceur plutôt efficace !

Au-delà de la remise à plat du code, le remplacement de Font Awesome apporte aussi un gain très concret sur le poids des ressources nécessaires à l'affichage des icônes.

L'ancienne intégration reposait sur cinq fichiers :

• all.min.css : 74 558 octets
• fa-brands-400.woff2 : 101 180 octets
• fa-regular-400.woff2 : 19 000 octets
• fa-solid-900.woff2 : 113 260 octets
• fa-v4compatibility.woff2 : 4 056 octets

Soit un total de 312 054 octets.

La nouvelle intégration regroupe les pictogrammes dans un seul fichier CSS, fluent-icons.css, de seulement 112 505 octets.

Le résultat ? 199 549 octets économisés, soit une réduction d'environ 64 % du poids brut des ressources comparées. Pas mal pour quelques petites icônes !

Autre différence : les pictogrammes sont intégrés sous forme de masques SVG directement dans le CSS. Il n'y a donc plus de police de caractères dédiée à charger, ni de service externe à solliciter pour les afficher.

Et sous le capot ?

Ce remplacement est finalement l'occasion de faire bien plus qu'un simple changement graphique. La gestion des icônes est désormais centralisée, les appels dans le code sont indépendants de la bibliothèque utilisée et les outils développés pour l'occasion faciliteront les prochaines évolutions.

C'est aussi une nouvelle étape dans le nettoyage engagé avec Fluent 2 : moins de dépendances, moins de ressources à charger et un code plus cohérent. Tout cela sans changer les habitudes d'utilisation du site pour les visiteurs.

La suite ?

Comme toujours après ce genre de chantier, il reste une phase de vérification en conditions réelles. Si vous repérez une icône manquante, mal affichée ou qui ne vous semble pas adaptée, n'hésitez pas à le signaler dans les commentaires de cette actualité.

Et maintenant, promis, on va essayer de trouver un chantier qui ne concerne pas des milliers de lignes de CSS… Enfin, jusqu'à la prochaine fois. 😉