Pendant quelques années nous avons cherché le saint Graal pour remplacer du texte par des images dans les pages HTML. Il y a eu sIFR qui nécessitait le plugin Flash, des bidouilles à base d’indentation et marges CSS négatives qui risquaient de casser pour ceux qui n’affichaient pas les images, des trucs horribles à base de display:none qui empêchaient le copier/coller, etc.
J’avais pas mal laissé tombé quand j’ai vu que certains jouaient avec des polices de caractères à la wingdings. Ça ne faisait pas de remplacement et ça nécessitait d’ajouter des caractères arbitraires qui risquaient de mal passer en cas d’absence de la police choisie.
Sauf que visiblement ils ont trouvé le saint Graal il y a un bon moment et personne ne m’a prévenu. Alors si vous aussi on ne vous a pas prévenu, regardez Symbolset et Ligature Symbols.
L’idée c’est d’utiliser les ligatures. Les ligatures ce sont ces artefacts qui permettent de remplacer certaines suites de caractères par un visuel spécifique afin d’en simplifier la lecture. On cite souvent « fl » et fi » comme exemple de ligature mais Wikipedia a une superbe illustration.
L’astuce est de déclarer une police personnalisée où « se connecter » est remplacé par une ligature qui contient l’icône correspondante. C’est vectoriel, ça s’adapte en taille comme en couleur, ça se dégrade parfaitement pour ceux qui ne savent pas relire la ligature ou la police de caractères, et pour le système ça reste encore le mot « se connecter » donc c’est totalement transparent. Bref, comme en plus c’est léger en poids, on a presque trouvé le saint Graal. Pourquoi personne ne m’avais rien dit ? Comment ai-je pu passer à côté ?
Vous avez même un outil en ligne qui fait tout ça : Icomoon
Laisser un commentaire