Les icônes rendent les sites web intuitifs. Navigation, réseaux sociaux, boutons d’action: partout, vous avez besoin de petits repères visuels que les visiteurs reconnaissent instantanément. Font Awesome résout ce problème depuis 14 ans avec une bibliothèque de plus de 2000 icônes gratuites, connectables en une seule ligne. Le problème, c’est que cette seule ligne apporte avec elle des centaines de kilo-octets.

Le package complet Font Awesome 7 Free pèse environ 150 Ko par style rien que pour les fichiers de webfont, sans le CSS. Ajoutez le CSS (environ 100 Ko minifiés supplémentaires), et chaque premier chargement de page délivre plus de 250 Ko à l’utilisateur. Pire: si vous utilisez 8 à 10 icônes sur deux mille, le navigateur télécharge quand même tout. Sur une connexion mobile 4G, cela représente 2 à 3 secondes d’attente supplémentaires. Google PageSpeed pénalise ce type de charge utile par une réduction directe du score.

Mais le problème est soluble. Nous allons vous montrer comment extraire de la bibliothèque uniquement les icônes réellement utilisées sur votre site et obtenir une taille finale de 10 à 15 Ko sans perte de fonctionnalité. Toutes les méthodes sont couvertes: de l’automatique au manuel, des outils en ligne aux utilitaires CLI. Pas de magie, juste des techniques qui fonctionnent.

💡 Aperçu rapide:

• Analysez votre site et dressez la liste des icônes Font Awesome effectivement utilisées
• Choisissez la méthode d’optimisation adaptée à votre situation: l’outil en ligne FontCut, l’utilitaire CLI fa-subset ou le mécanisme officiel des Kits
• Pour un contrôle maximal, empruntez la voie manuelle via FontForge ou IcoMoon: cela demande un effort, mais vous donne une maîtrise complète du fichier final
• Générez la webfont allégée et le CSS, puis remplacez la version complète sur votre serveur par ces fichiers
• Mesurez la vitesse avant et après: l’amélioration typique du score PageSpeed est de 20 à 40 points

Pourquoi alléger Font Awesome?

La raison principale est la vitesse de chargement. Une étude Google montre que 53% des visiteurs mobiles quittent une page si elle met plus de 3 secondes à charger. Chaque tranche de 100 Ko supplémentaire sur le chemin critique de rendu augmente le délai avant le First Contentful Paint.

Font Awesome Free 7 contient trois styles: Solid, Regular et Brands. Combinés, cela représente plus de 2000 icônes et environ 450 Ko de fichiers de webfont compressés. Une page d’atterrissage ou un blog typique utilise 10 à 20 icônes, soit moins de 1% de la bibliothèque. Le navigateur télécharge tout le reste pour rien.

La deuxième raison concerne les Core Web Vitals. La métrique LCP (Largest Contentful Paint) dépend directement de la rapidité avec laquelle le navigateur reçoit et affiche les polices. Une version non allégée de Font Awesome bloque le rendu du texte jusqu’au chargement de la webfont. Après le subsetting, le fichier devient suffisamment petit pour que le navigateur le reçoive dès la première requête réseau.

La troisième raison est le trafic mobile. Les utilisateurs avec des forfaits data limités ne vous remercieront pas pour les 400 Ko supplémentaires sur chaque page. Le subsetting vous redonne le contrôle de votre budget de chargement.

Chiffres concrets: sur un projet, réduire un fichier de webfont de 345 Ko à 14,5 Ko a fait passer le score Lighthouse Performance de 52 à 89 points. La différence est visible à l’œil nu: la page devient interactive presque instantanément.

Méthode 1: le mécanisme officiel des Kits (recommandé)

L’approche la plus simple et la mieux supportée consiste à utiliser un Kit Font Awesome avec le subsetting intégré. Cette méthode fonctionne avec un compte gratuit et ne nécessite aucun outil tiers.

Comment cela fonctionne

Un Kit est un package Font Awesome personnalisé que vous configurez dans votre tableau de bord sur fontawesome.com. Dans les paramètres du Kit, il y a une section «Icon Selection» avec deux modes:

• By Style: vous cochez les styles dont vous avez besoin (Solid, Regular, Brands), et le Kit ne charge que ceux sélectionnés. Rien qu’à cette étape, vous supprimez deux styles sur trois si vous n’avez besoin que de Solid.
• By Icon: vous spécifiez des icônes particulières via la recherche, et le Kit génère un fichier ne contenant qu’elles. Ce mode offre la compression maximale.

Après avoir enregistré les paramètres, le Kit reconstruit automatiquement le package. Vous obtenez une balise <script> à insérer dans le <head> de votre site. Le CDN de Font Awesome délivre la version déjà allégée. Pas de fichiers locaux, pas de construction manuelle.

Avantages de l’approche Kit

• Pas besoin de télécharger ni d’héberger des fichiers: le CDN de Font Awesome distribue le package allégé dans le monde entier
• Lorsque vous ajoutez une nouvelle icône, il vous suffit de mettre à jour la liste dans les paramètres du Kit, et la reconstruction se fait automatiquement
• Fonctionne avec Font Awesome Pro, y compris les styles Duotone et Sharp
• Prend en charge les modes SVG+JS et Webfonts+CSS

Quand un Kit ne convient pas

La seule limite: un Kit allégé ne peut pas être téléchargé sur votre propre serveur avec l’offre gratuite. Si l’hébergement local des polices est critique pour vous (réseau interne, politique de sécurité), un Kit n’est pas une option. Dans ce cas, tournez-vous vers les méthodes 2 et 3.

Méthode 2: l’outil en ligne FontCut

Si vous ne souhaitez pas vous inscrire chez Font Awesome ou si vous préférez un fichier ZIP prêt à l’emploi que vous pouvez placer dans votre dépôt, essayez FontCut.com. Il s’agit d’un générateur en ligne gratuit spécifiquement conçu pour Font Awesome 6.4.0 et Bootstrap Icons.

Le processus comporte trois étapes:

• Sélectionnez un jeu d’icônes (Font Awesome Free 6.4.0, la dernière version disponible)
• Cochez les icônes dont vous avez besoin dans la grille visuelle
• Téléchargez une archive ZIP contenant les fichiers CSS et webfont, puis téléversez-la sur votre serveur

Le résultat est un package autonome de 10 à 15 Ko que vous hébergez vous-même. L’outil ne nécessite aucune inscription et l’aperçu montre la taille finale en temps réel.

Limite: FontCut utilise FA 6.4.0, et non la version actuelle 7.2.0. Pour la plupart des projets, la différence est négligeable: les icônes de style Solid ne changent pas entre les versions. Mais si vous avez besoin d’icônes ajoutées dans FA 7 (packages Pro+), FontCut ne les proposera pas.

Méthode 3: l’utilitaire CLI fa-subset (pour les développeurs)

La détection automatique des icônes utilisées est l’approche la plus précise. L’utilitaire fa-subset (Python, licence BSD-2-Clause, instructions sur Dev.to) analyse le code source de votre projet, trouve toutes les classes fa-* et génère une webfont allégée contenant uniquement les icônes réellement utilisées.

Installation:

1
pip install fonttools

Exécution de base (simulation pour analyse):

1
python3 bin/fa-subset.py \
2
  --src ./src ./templates \
3
  --ext .html .php .twig .js \
4
  --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \
5
  --out ./optimised \
6
  --dry-run

L’utilitaire affiche la liste des icônes trouvées et la taille projetée du fichier allégé. Sans l’option --dry-run, il génère le CSS et la webfont prêts à l’emploi dans le dossier ./optimised.

Points forts de fa-subset:

• Analyse les fichiers PHP, HTML, JS, Blade, Twig, Vue, React et tout fichier texte de votre projet
• Prend en charge les icônes duotone (doubles points de code dans Font Awesome 6+)
• Peut produire un rapport JSON pour les pipelines CI/CD: --report-json ./report.json --strict-styles
• Compatible avec les thèmes WordPress, les templates Laravel et les composants React/Vue

Résultat concret en production: compression de 803 Ko (polices + CSS) à 14,5 Ko, soit une réduction de 98%. L’utilitaire est gratuit et indépendant des services Font Awesome.

Méthode 4: IcoMoon (constructeur visuel de polices)

IcoMoon est une application web permettant de créer des polices d’icônes sur mesure. Elle est accessible à l’adresse icomoon.io/app. L’approche est légèrement plus complexe que celle des Kits, mais offre une capacité unique: mélanger des icônes provenant de différentes bibliothèques dans un seul fichier.

Étape 1: sélectionner le pack Font Awesome

Rendez-vous sur icomoon.io/app, cliquez sur «Add Icons From Library», recherchez Font Awesome dans la liste, puis cliquez sur «Add».

Étape 2: cocher les icônes dont vous avez besoin

Dans la fenêtre de sélection, cochez toutes les icônes utilisées sur votre site en cliquant sur chacune d’elles. Vous pouvez sélectionner plusieurs bibliothèques à la fois (par exemple, Font Awesome + Material Icons) et obtenir un seul fichier contenant les icônes des deux ensembles.

Étape 3: générer et télécharger la police

Une fois la sélection terminée, cliquez sur le bouton «Generate Font» en bas de la page. IcoMoon affiche alors toutes les icônes sélectionnées et propose un bouton «Download». L’archive ZIP contient les fichiers de la webfont (woff, woff2, eot, svg, ttf), un fichier style.css et une démo demo.html.

Enregistrez les fichiers dans le dépôt de votre site et liez le style.css dans le <head>. En cas de problème, ouvrez le demo.html de l’archive: il montre exactement comment la police est connectée et utilisée.

IcoMoon est particulièrement adapté lorsque vous avez besoin de mélanger des icônes de différents ensembles ou lorsque vous ne souhaitez fondamentalement pas dépendre du CDN de Font Awesome.

Méthode 5: élagage manuel via FontForge

C’est la méthode la plus chronophage, mais aussi celle qui vous donne le plus de contrôle. Elle convient lorsque vous souhaitez comprendre chaque octet du fichier final ou travailler dans un environnement sans accès à des services externes.

Étape 1: localisez la police

Téléchargez Font Awesome depuis le site officiel. Supprimez le lien CDN du <head> s’il y était. Décompressez l’archive dans le dépôt de votre site.

Connectez le CSS en local:

1
<link rel="stylesheet" href="/font-awesome/css/font-awesome.css">

Videz le cache du navigateur et rechargez le site. Les icônes doivent s’afficher comme avant, mais vous contrôlez désormais les fichiers sur votre serveur.

Étape 2: supprimez les fichiers inutiles

Après avoir décompressé l’archive Font Awesome, vous verrez l’arborescence suivante:

Seuls les fichiers CSS et les webfonts sont nécessaires au fonctionnement. Les navigateurs modernes n’ont besoin que du format woff2, vous pouvez donc supprimer les fichiers ttf, eot et svg.

Supprimez les sources Less et SCSS si vous ne prévoyez pas de les compiler. Conservez uniquement css/ et fonts/ avec le fichier fa-solid-900.woff2 (ou l’équivalent pour votre version).

Étape 3: éditez la webfont dans FontForge

Téléchargez et installez FontForge (un éditeur de polices open source gratuit). Ouvrez le fichier .woff2 via Fichier → Ouvrir.

Dans l’interface de FontForge, repérez le panneau des glyphes. Pour éviter de faire défiler manuellement, allez dans Encodage → Compact: toutes les positions occupées seront ramenées au début.

Voici la partie la plus critique: maintenez la touche Maj enfoncée et sélectionnez tous les glyphes que votre site n’utilise PAS. Supprimez-les (Édition → Effacer). Conservez uniquement les icônes réellement présentes dans votre balisage: réseaux sociaux, flèches, icônes de menu, logos de marques.

Enregistrez le résultat: Fichier → Générer les polices. Sélectionnez Web Open Font Format (woff2) et indiquez le nom du fichier. Remplacez la webfont d’origine dans le dossier fonts/ par la version élaguée.

Rechargez le site et vérifiez toutes les icônes. Si certaines ont disparu, vous avez supprimé un glyphe nécessaire: rouvrez FontForge et répétez la sélection avec plus d’attention.

Ou peut-être simplement changer de bibliothèque?

Parfois, la meilleure optimisation n’est pas d’optimiser Font Awesome, mais de choisir un outil plus léger dès le départ. Les alternatives modernes fournissent des icônes au format SVG avec du tree-shaking au niveau de l’import: seules les icônes que vous importez explicitement se retrouvent dans le bundle.

Trois options qui méritent réflexion:

• Lucide Icons: plus de 1460 icônes, licence MIT, successeur direct de Feather Icons. Des icônes sur une grille de 24px, stylistiquement proches de FA, mais le paquet ne pèse que quelques kilo-octets avec le tree-shaking. Pour React/Vue/Svelte, des composants natifs avec les props size, color et strokeWidth.

• Phosphor Icons: plus de 1400 icônes en six styles (thin, light, regular, bold, fill, duotone). Chaque icône est importée individuellement: import { House } from '@phosphor-icons/react'. Aucun poids mort inutilisé.

• Bootstrap Icons: plus de 2000 icônes SVG, gratuites, en développement actif. Compatibilité directe avec l’écosystème Bootstrap, mais utilisables de manière indépendante. Les fichiers SVG séparés permettent d’intégrer les icônes en inline sans requêtes supplémentaires.

Si votre site fonctionne sous WordPress, consultez notre guide pour ajouter Font Awesome à WordPress. Pour ceux qui souhaitent approfondir le sujet des polices web, nous avons un article détaillé sur le chargement des polices web sans bloquer le rendu.

⁉️🤔 Foire aux questions

Qu’est-ce que le subsetting d’icônes et pourquoi est-ce nécessaire?

Le subsetting consiste à créer une version allégée d’une police d’icônes contenant uniquement les icônes réellement utilisées sur le site. Le package complet Font Awesome 7 Free pèse environ 450 Ko en fichiers de polices web compressés. Un site type utilise 10 à 20 icônes; après subsetting, le fichier passe à 10-15 Ko. La différence de chargement se reflète immédiatement dans le score PageSpeed: l’amélioration typique est de 20 à 40 points.

Combien d’icônes le navigateur charge-t-il si j’ai connecté Font Awesome via un CDN?

Toutes. Un lien CDN vers all.min.css tire l’ensemble complet des trois styles: Solid, Regular et Brands. Le navigateur charge tous les fichiers de polices web même si une seule icône est utilisée sur la page. C’est précisément pourquoi l’approche CDN sans Kit est la plus coûteuse en octets. Un Kit avec le paramètre «By Icon» résout ce problème: le CDN ne fournit que les icônes que vous avez explicitement sélectionnées dans les paramètres.

Quelle méthode d’optimisation choisir pour un site WordPress?

Si votre site tourne sous WordPress et que vous ne voulez pas utiliser la ligne de commande, utilisez le Kit officiel (méthode 1). La configuration prend 5 minutes dans le tableau de bord fontawesome.com, et les résultats sont immédiatement servis via CDN. Si la politique de sécurité interdit l’usage d’un CDN, FontCut (méthode 2) fonctionne: téléchargez le ZIP, uploadez-le via FTP, connectez-le dans header.php. Pour les développeurs qui souhaitent automatiser, fa-subset (méthode 3) peut scanner les templates PHP de votre thème et reconstruire la police à chaque déploiement.

Est-il sûr de supprimer les formats de polices web ttf, eot et svg?

Oui. Les navigateurs modernes (Chrome, Firefox, Safari, Edge) prennent en charge le woff2 depuis 2016. Selon les données de Can I Use, la couverture dépasse 98% du marché mondial des navigateurs. Le format woff2 offre une meilleure compression (en moyenne 30% plus compact que le woff). Les fichiers eot (nécessaires uniquement pour IE8), ttf et svg peuvent être supprimés sans risque du dossier des polices. Conservez uniquement le woff2, et si vous avez besoin de prendre en charge les anciens Safari sur iOS 12 et versions antérieures, ajoutez le woff comme solution de repli.

Cela vaut-il encore la peine d’utiliser Font Awesome en 2026?

Cela dépend du projet. Si vous avez déjà Font Awesome en place et utilisez 5 à 10 icônes, le subsetting (n’importe quelle méthode ci-dessus) résout le problème de poids en une heure. Si le projet est nouveau et que vous choisissez une bibliothèque à partir de zéro, envisagez Lucide ou Phosphor: elles sont conçues dès le départ autour du tree-shaking et ne génèrent aucun surcoût. Font Awesome reste le leader en quantité d’icônes et d’intégrations dans son écosystème, mais son coût en poids sans subsetting est plus élevé que les alternatives SVG modernes.

Cela vaut-il la peine de se préoccuper de quelques dizaines de kilo-octets?

Certainement oui. Chaque kilo-octet non optimisé sur le chemin de rendu critique réduit directement la conversion. Amazon a calculé que 100 ms de délai de chargement coûtent 1% de ventes. Google pénalise les pages lentes dans les résultats de recherche mobile. Ce n’est pas du perfectionnisme; c’est de l’économie directe.

Choisissez la méthode adaptée à votre situation:

• Effort minimum: Kit avec le paramètre By Icon. 5 minutes, résultat immédiatement sur CDN.
• Hébergement local, sans inscription: FontCut. 10 minutes, un ZIP sur votre serveur.
• Automatisation CI/CD: fa-subset. Scanne le code, reconstruit au déploiement.
• Contrôle total: FontForge ou IcoMoon. Prend plus de temps, mais vous connaissez chaque glyphe.

Passer de 450 Ko à 15 Ko change radicalement la perception de la vitesse. Essayez sur un projet, mesurez PageSpeed avant et après. Le résultat parlera de lui-même.