Des icônes sans images avec unicode !

Dans une certaine mesure, il est possible de totalement éviter les images pour vos icônes ! Certaines icônes sont tout simplement disponible en unicode et html. C’est à dire que c’est du « texte-icône ». Certains caractères « spéciaux » tels que « ç, €, à, é, è, ê… » possèdent bien en html des codes ressemblant à ça : « &ccedil ». Il ne vous viendrait pas à l’esprit de mettre une image à la place du texte… Alors faisons pareil pour les icônes !

Vous me direz peut-être même que quand vous écrivez une page web, vous ne mettez pas le code html corrspondant au « ç » ni au « ê », mais directement le caractère comme on le trouve sur le clavier… Tout a fait Thierry, en encodant vos pages en UTF-8, vous pouvez tout mixer, sans avoir à mettre le code HTML correspondant.

Quel intérêt ?

En développement web, on sait qu’il est très important d’une part, de limiter le poids de nos pages pour un chargement rapide, et d’autre part, pour diminuer le nombre de requêtes HTTP du fait que les navigateurs ne chargent que 5 ou 6 fichiers à la fois, de limiter le nombre de fichiers (images, fichiers css, js…) que l’on charge.

À cet effet, on utilise la technique des sprites css. Pour ceux qui ne connaissent pas, il s’agit de regrouper toutes les petites images/icônes d’un site en une seule image. Ainsi, au chargement, le navigateur n’a qu’une seule image à charger, et ensuite le CSS se charge d’afficher les parties adéquates de l’image aux endroits idoines.

La parade

De même que vous mettrez peut-être la lettre « x » en guise d’icône de suppression, tentons de trouver des équivalents « texte » à nos icônes : ❤ ★ ⚑ ♫ ⏏ ♪ ⚠ ✓ ✔ ✚ ⇧ ⇪ ⌫ ⌘ ╳ ;) ça vous plaît ? Et la magie de l’UTF-8 fait que je n’ai même pas besoin de mettre le code HTML dans ma page, je colle directement les texte-icônes.

Icônes

☕ ❄ ♻ ⚡ ⚠ ☢ ☠ ✈ ✇ ☎ 〒 ✓ ✔ ☐ ☑ ⚑ ♥ ✝ ✚ ╳ ⌧ ☤ ☮ ♂ ♀ ★ ☂ ⇋ ☈ ⤳ ⤼ ⤽   ◄ ▶

Symboles techniques

 ⌘ ⌥ ⌫ ␡ U ⌦  ⎋ ␛ ⏎ ↩ ↑ ↓ ← → ⇥ ⇧ ⇪ ⏏ ⌽

Musique

♭ ♯ ♮ ♩ ♪ ♫ ♬

Scientifique

×(ce n'est pas la lettre x)
⌃(ce n'est pas un accent circonflexe ^)
÷ ∕ ∑ λ ∩ ∪ µ ∫ ∴ ≠ ≈ ≉ ≤ ≥ ⊂ ⊃ ⊨ ⊭ ⩵ ⩶ ␀ ␖ ␆

Ecriture

 
‽ ‼ ⁇ ⁈ ⁉ ¶ † ‡ 〃 〆 ‵ ‶ ¤ …

Bien entendu, ce n’est qu’un petit aperçu des milliers de possibilités que nous offre l’unicode, si vous voulez quelque chose de plus exhaustif, je vous invite à aller voir la table des caractères unicode, qui est très bien faite !

D’autres pistes

Bien entendu il y a d’autres pistes que les caractères unicodes ou les images. Il est par exemple possible d’intégrer les images encodés en base64, non plus comme fichiers externes, mais directement comme une chaine de caractères dans le html ou dans le css en background-image.

Une autre solution, qui offre les mêmes avantages que les éléments textuels – c’est à dire de pouvoir être agrandis sans aucune perte de qualité et décliné dans toutes les couleurs via le css, sont les sets d’icônes. Grâce à la propriété font-face du css3, il est possible d’intégrer n’importe quel type de police dans vos pages. Et les sets d’icônes vectoriels existent entre autres au format polices.

Les temps de chargement ne sont pas aussi bons qu’avec les deux autres techniques mentionnées (il faut charger un élément externe et faire une requête http supplémentaire), mais c’est très souple. De plus, si vous vous reposez sur un CDN, pour fournir un set d’icône répandu, il y a de forte chances que les icônes soient déjà présentes dans le cache du navigateur de vos visiteurs. Cela signifie qu’ils n’auront donc même pas à la re-charger.

Quelques sets populaires :

Déjà 3 réponses, rejoignez la discussion !

  • Buzut

    dit :

    Certains sites ne l’implantent pas ? Il y a bien entendu des équivalents html et unicodes, donc cest le navigateur et l’os qui l’interpretent !
    En revanchent, tous caractères ne sont pas pris en charge par certains OS, et là on obtient des signes bizarres ou des carrés vides…

  • Reka

    dit :

    Connaissez-vous un script qui affiche en liste tous les codes html d’icônes unicode et qui permette de les sélectionner par clic côté utilisateur comme le fait Twitter, svp ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *