[Résolu] La propriété "content" appliquée à :before

Bonjour à tous,

Parfois en naviguant sur un site web, il m'arrive par curiosité de faire un clic droit sur la page, puis de faire "inspecter l'élément" (sous Google Chrome) pour voir les propriétés CSS utilisées.

Sur certains sites, j'ai constaté qu'un code tel que celui ci-dessous permettait d'afficher des images.

.icon:before
{
    content: '\e018';
}

Ce qui m'étonne c'est que normalement pour afficher une image via le pseudo-élément :before, il faudrait utiliser un code comme ça, en indiquant un chemin vers le répertoire de l'image.

.icon:before
{
   content: url('chemin/vers/mon/image.png');
}

Du coup, quelqu'un pourrait m'expliquer comment ça fonctionne ?

Bonjour,

Le caractère '\e018' correspond à un caractère égyptien.

Cette technique est très très souvent utilisée dans le cadre de fontes d'icônes, par exemple icomoon ou font-awesome (embarqué sur Bootstrap), elle permet d'afficher l'icône souhaitée car ce caractère égyptien va tout simplement prendre la forme d'un autre caractère si la police d'icône lui est appliquée.

Je te conseille d'aller faire un tour sur https://icomoon.io/app/#/ pour tester le principe si tu ne le connais pas.