Le Hollandais Volant

En HTML/CSS, Si vous utilisez des icônes avec une web-font (donc dans un fichier woff/woff2 dédié aux icônes), et que vous affichez les icônes dans un pseudo-élément avec la propriété "content" alors, il est possible que vous fassiez comme moi :

::before, ::after {
    font-family: icons.woff;
}

Comme ça, tous les pseudo-éléments de la page, pour peu qu’ils aient un « content: », utiliseront la police des icônes.

Sauf que, et c’est pas intuitif, il faut savoir que le contenu de l’attribut « alt » des images est affiché avec un pseudo-élément (au moins dans Firefox).

Donc lui aussi va utiliser la police dédiée aux icônes, ce qui n’est pas une bonne chose : généralement les icônes sont encodés sur 3 ou 4 octets, et ça risque d’afficher un charabia d’unicode invalide.

Faut donc ajouter :

img::after, img::before {
    font-family: initial;
}

Ou, si vous voulez combiner ces deux déclarations CSS en une seule :

:not(img)::before, :not(img)::after {
    font-family: icons.woff;
}

Ça appliquera la police des icônes sur tous les éléments, sauf les images.

… par contre, ça ne tiendra pas compte des autres éléments qui ont un attribut de remplacement (les area et certains input). Du coup, je propose ça :

:not([alt])::before, :not([alt])::after {
    font-family: icons.woff;
}

Application sur tous les pseudo-éléments qui n’ont pas d’attribut « alt ».