Comment supprimer Font Awesome de Cassiopeia?

Dans cet article, je vais vous donner plusieurs raisons pour lesquelles vous devriez peut-être supprimer la bibliothèque Font Awesome de Cassiopeia ; et je vais vous fournir des instructions étape par étape sur la façon de supprimer Font Awesome de Cassiopeia, le modèle par défaut de Joomla.

De nos jours, Font Awesome est très largement utilisée dans les templates et les extensions Joomla to pour améliorer le rendu visuel de vos sites Web. Cependant, il y a des raisons légitimes de vouloir supprimer cette bibliothèque de votre site Web.

Font Awesome, c'est quoi?

Créée par Dave Gandy en 2012, Font Awesome est une bibliothèque d'icônes qui fournit des icônes au format SVG (Scalable Vector Graphics) qui peuvent facilement être stylisées avec CSS. Font Awesome est aujourd'hui la deuxième bibliothèque d’icônes la plus populaire sur le web (20 % de part de marché), juste après Google Fonts.

Comme leur nom l'indique, ces icônes sont superbes sur n'importe quel appareil, ne pèsent presque rien (c'est du SVG) et il y en a plus de 14 500 (1 700 gratuites) disponibles dans la dernière version. Ces icônes peuvent être facilement intégrées dans les contenus Joomla pour afficher des icônes à divers éléments tels que des menus, des articles, des boutons, des modules, etc. Vous pouvez facilement modifier leur taille, leur couleur, ajouter une ombre portée et même les animer, etc.
Et vous n'avez même pas besoin d'installer une extension puisque la bibliothèque Font Awesome est intégrée nativement dans Cassiopeia, le template par défaut de Joomla.

Mais si ces icônes sont presque parfaites, pourquoi vouloir les supprimer de Cassiopeia, le template par défaut de Joomla ?

Pourquoi désactiver Font Awesome de votre site Joomla?

Il y a plusieurs (très) bonnes raisons pour lesquelles il faut supprimer la librairie Font Awesome de Cassiopeia.

Le chargement de polices à partir de sources externes peut, dans certains pays, être contraire au Règlement Général sur la Protection des Données (RGPD). La solution évidente pour être conforme avec le RGPD est d’héberger ce genre d’icônes sur le serveur de votre site Web.

Il y a 14,865 icônes disponibles dans Font Awesome 6 mais vous utiliserez probablement moins d’une vingtaine d’icônes différentes (en moyenne) sur votre site. Vous n’avez vraiment pas besoin des icônes supplémentaires fournies car ce sont des icônes inutilisées.

Par défaut, Cassiopeia charge le fichier contenant toutes les icônes - /media/system/css/joomla-fontawesome.min.css - sur toutes les pages, même celles où il n'y a aucune icône Font Awesome affichée ! Cela augmente le nombre de requêtes HTTP et diminue les performances globales de votre site Web.
En supprimant ces dépendances externes, vous améliorerez les performances de votre site Web en réduisant le nombre de requêtes HTTP.

Comment supprimer Font Awesome de Cassiopeia?

Idéalement, nous devrions pouvoir éviter de charger Font Awesome de Cassiopeia via une option ou un paramètre dans le backend de Joomla, mais ce n'est pas le cas.

Nous n'avons donc pas d'autre choix que de surcharger Cassiopée, car le chargement de cette dépendance est défini dans le fichier 'index-php' du template.
Le moyen le plus sûr de procéder est de créer un template enfant de Cassiopeia dans votre backend.

Une fois cela fait, vous pouvez éditer le fichier 'index-php' de votre template enfant en toute sécurité.

Repérez cette ligne:

$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');

Commentez la en ajoutant un double slash au début de la ligne, comme ceci:

//$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');

Juste en dessous, copiez-collez le code suivant:

$wa->registerStyle('fontawesome', '')

Source: GitHub

En clair, ce code va bloquer le chargement de Font Awesome par Cassiopeia.

Enregistrez votre saisie.

Maintenant si vous regardez le code source de votre site, vous verrez que la librairie Font Awesome n'est plus chargée.

Avant

Après

Voilà c'est mieux MAIS...

Comme il y a de nombreuses icônes affichées nativement par Cassiopée ici et là (pagination, lien "haut de page", etc), vous allez devoir remplacer toutes ces icônes. Et parce que vous souhaiterez peut-être afficher des icônes sur vos contenus, je vais vous présenter maintenant 2 options pour afficher des icônes dans votre site Joomla.

Par quoi remplacer Font Awesome?

Que ce soit pour remplacer les icônes qui étaient affichées précédemment par Font Awesome dans Cassiopée ou pour celles que vous souhaiteriez utiliser à partir de maintenant, voici 2 options de remplacement.
Ces 2 options sont parfaitement conformes avec le RGPD, extrémement légères et donc, parfaites en termes de performances et de temps de chargement.

Les caractères Unicode

Dans la plupart des cas, nous affichons des icônes pour des usages basiques comme des caractères, des symboles, etc.
Pour ce type d'usage, je recommande d'insérer des caractères Unicode dans votre contenu.

Bonne nouvelle, il existe plus de caractères 23,000 Unicode disponibles! Voici quelques exemples de caractères Unicode pour afficher le symbole "Coche":

Pour afficher un caractère Unicode dans une page Web, vous devez le convertir en code HTML. Pour ce faire, vous ajoutez &#x devant le numéro Unicode, et ; après, et cela affichera votre caractère Unicode sur votre page Web.

Dans notre exemple, le code HTML pour "Coche grasse" is: ✔

Et naturellement, vous pouvez facilement personnaliser ces caractères avec CSS.

En savoir plus sur l'Unicode:

• Unicode site officiel
• Wikipedia Liste des caractères Unicode
• w3schools.com HTML Unicode (UTF-8) Référence

les SVG

Pour les autres symboles, comme les icônes sociales, les icônes de marque, etc., je recommande d'insérer des SVG dans votre contenu.

Les SVG sont des graphiques vectoriels adaptables, exactement comme... Font Awesome.

Bonne nouvelle, vous pouvez obtenir la version SVG des icônes gratuites Font Awesome, directement sur leur site!

Voici le code du SVG du logo de Joomla donné par Font Awesome:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M.6 92.1C.6 58.8 27.4 32 60.4 32c30 0 54.5 21.9 59.2 50.2 32.6-7.6 67.1 .6 96.5 30l-44.3 44.3c-20.5-20.5-42.6-16.3-55.4-3.5-14.3 14.3-14.3 37.9 0 52.2l99.5 99.5-44 44.3c-87.7-87.2-49.7-49.7-99.8-99.7-26.8-26.5-35-64.8-24.8-98.9C20.4 144.6 .6 120.7 .6 92.1zm129.5 116.4l44.3 44.3c10-10 89.7-89.7 99.7-99.8 14.3-14.3 37.6-14.3 51.9 0 12.8 12.8 17 35-3.5 55.4l44 44.3c31.2-31.2 38.5-67.6 28.9-101.2 29.2-4.1 51.9-29.2 51.9-59.5 0-33.2-26.8-60.1-59.8-60.1-30.3 0-55.4 22.5-59.5 51.6-33.8-9.9-71.7-1.5-98.3 25.1-18.3 19.1-71.1 71.5-99.6 99.9zm266.3 152.2c8.2-32.7-.9-68.5-26.3-93.9-11.8-12.2 5 4.7-99.5-99.7l-44.3 44.3 99.7 99.7c14.3 14.3 14.3 37.6 0 51.9-12.8 12.8-35 17-55.4-3.5l-44 44.3c27.6 30.2 68 38.8 102.7 28 5.5 27.4 29.7 48.1 58.9 48.1 33 0 59.8-26.8 59.8-60.1 0-30.2-22.5-55-51.6-59.1zm-84.3-53.1l-44-44.3c-87 86.4-50.4 50.4-99.7 99.8-14.3 14.3-37.6 14.3-51.9 0-13.1-13.4-16.9-35.3 3.2-55.4l-44-44.3c-30.2 30.2-38 65.2-29.5 98.3-26.7 6-46.2 29.9-46.2 58.2C0 453.2 26.8 480 59.8 480c28.6 0 52.5-19.8 58.6-46.7 32.7 8.2 68.5-.6 94.2-26 32.1-32 12.2-12.4 99.5-99.7z"/></svg>

Copiez/collez vos SVG partout où vous en avez besoin dans votre contenu. Et bien sûr, vous pouvez styliser vos SVG.

Voici le résultat avec une largeur et une hauteur fixées à 65 pixels et rempli en rose avec la couleur #FF2386 (parce que... pourquoi pas).

<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M.6 92.1C.6 58.8 27.4 32 60.4 32c30 0 54.5 21.9 59.2 50.2 32.6-7.6 67.1 .6 96.5 30l-44.3 44.3c-20.5-20.5-42.6-16.3-55.4-3.5-14.3 14.3-14.3 37.9 0 52.2l99.5 99.5-44 44.3c-87.7-87.2-49.7-49.7-99.8-99.7-26.8-26.5-35-64.8-24.8-98.9C20.4 144.6 .6 120.7 .6 92.1zm129.5 116.4l44.3 44.3c10-10 89.7-89.7 99.7-99.8 14.3-14.3 37.6-14.3 51.9 0 12.8 12.8 17 35-3.5 55.4l44 44.3c31.2-31.2 38.5-67.6 28.9-101.2 29.2-4.1 51.9-29.2 51.9-59.5 0-33.2-26.8-60.1-59.8-60.1-30.3 0-55.4 22.5-59.5 51.6-33.8-9.9-71.7-1.5-98.3 25.1-18.3 19.1-71.1 71.5-99.6 99.9zm266.3 152.2c8.2-32.7-.9-68.5-26.3-93.9-11.8-12.2 5 4.7-99.5-99.7l-44.3 44.3 99.7 99.7c14.3 14.3 14.3 37.6 0 51.9-12.8 12.8-35 17-55.4-3.5l-44 44.3c27.6 30.2 68 38.8 102.7 28 5.5 27.4 29.7 48.1 58.9 48.1 33 0 59.8-26.8 59.8-60.1 0-30.2-22.5-55-51.6-59.1zm-84.3-53.1l-44-44.3c-87 86.4-50.4 50.4-99.7 99.8-14.3 14.3-37.6 14.3-51.9 0-13.1-13.4-16.9-35.3 3.2-55.4l-44-44.3c-30.2 30.2-38 65.2-29.5 98.3-26.7 6-46.2 29.9-46.2 58.2C0 453.2 26.8 480 59.8 480c28.6 0 52.5-19.8 58.6-46.7 32.7 8.2 68.5-.6 94.2-26 32.1-32 12.2-12.4 99.5-99.7z" fill="#FF2386"/></svg>

En savoir plus sur les SVG:

• FreeCodeCamp How to Use SVG Images in CSS and HTML
• Mozilla Developper SVG: Scalable Vector Graphics - Reference

Conclusion

Comme nous l'avons vu, les bibliothèques externes comme Font Awesome apportent des fonctionnalités intéressantes mais elles sont un impact significatif sur la confidentialité et les performances. Choisir de supprimer ces dépendances pourrait être une bonne décision si ces 2 points sont importants pour vous, pour votre site web et pour vos visiteurs.

Dans cet article, je vous ai montré comment supprimer Font Awesome de Cassiopeia et je vous ai proposé 2 solutions de remplacement qui respectent la confidentialité et les performances. Désormais, vous pouvez décider de n’afficher que les icônes nécessaires sur votre site Web.