Le problème

Pour intégrer des icônes sur une page web, on a souvent envie d’utiliser des banques d’icônes toutes faites comme FontAwesome. Souvent, on embarque l’ensemble de la banque d’icône au complet dans la page alors qu’on n’en utilise qu’une poignée.

Comment faire ?

Les solutions sont proposées ici de la plus favorable à l’environnement à la moins favorable :

Privilégier le texte

C’est l’option qui est à la fois la plus écologique et qui permet également de limiter les problème d’accessibilité.

Ex : J’aime l'éco-conception.

Choisir des symboles ASCII

D’un point de vue environnemental, c’est toujours bon. Par contre, c’est peut-être un peu moins pratique d’un point de vue accessibilité. Et cela peu également introduire des disparités en fonction des systèmes d’exploitations.

Ex : J’♥ l'éco-conception.

Intégrer les icônes directement dans le CSS

Il est possible d’incorporer directement les icônes dans le CSS avec les propriétés background-image et mask-image.

background-image

L'idée est d'encoder le SVG dans une URL, puis de l'utiliser directement en CSS. Voici un outil pour l' encodage de SVG .

Exemple :

.icon {
  background-size: contain;
  background-repeat: no-repeat;
  text-align: justify;
  background-position: center;
  width:1em;
  height:1em;
  display: inline-block;
}
.heart_icon {
  background-image: url('data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'utf-8\'%3F%3E%3Csvg width=\'800px\' height=\'800px\' viewBox=\'0 0 24 24\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z\' fill=\'%231C274C\'/%3E%3C/svg%3E');
}

<p>J'<span class="icon heart_icon"></span> l'écoconception.</p>

J' l'éco-conception.

mask-image

Mask-image a l'avantage de permettre de modifier la couleur de l’icône.

Mais attention cette propriété n’est pas compatible avec certains navigateurs, donc il vaut mieux réserver cette technique si le fait que l’image n’apparaisse pas n’est pas incommodant ou prévoir un fallback.

Voir ce tutoriel en anglais sur les masques.

Utiliser des bibliothèques qui permettent de sélectionner les icones

Des outils comme IcoMoon permettent d’avoir un usage quasi identique à FontAwesome. Mais ils permettent de choisir les icônes qui seront utilisées et seules ces dernières seront téléchargées.

Exemple :

<link rel="stylesheet" href="style.css">
<p>J'<span class="icon-heart"></span> l'écoconception.</p>

J' l'écoconception.

Ensuite ?

• Voir le commandement suivant : Les insertions de contenus dynamiques, tu éviteras
• Revenir à la liste de commandements