Utiliser @font-face pour vos icones

0 commentaires

Par Seb

Un article récent sur Net Tuts propose cette idée toute simple, mais bigrement pertinente : pourquoi ne pas utiliser la propriété CSS @font-face pour afficher des icônes sur un site ?

Une fois qu’on y réfléchit un peu, le principe est plutôt séduisant, car il cumule plusieurs avantages :

  • Un seul fichier chargé pour toutes les icônes du site – les amateurs de sprites CSS apprécieront
  • Un poids très réduit pour toute une collection d’icônes
  • Possibilité de les afficher dans n’importe quelle taille, grâce à leur nature vectorielle – qui supporte du coup très bien les agrandissements de taille de texte
  • Choix de couleurs illimité
  • Fond transparent, sans les soucis des gif/png
  • Un support très large : Internet Explorer 4+, Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+ (je vous conseille l’utilisation d’un kit @font-face pour un support garantit)

Certes, le style graphique est assez limité : les icônes seront forcément monochromes, et ne permettent pas toutes les fantaisies (transparences, biseautages…), mais pour de nombreux cas de figure, c’est plus que suffisant. Qui plus est, en ajoutant un peu de CSS 3 par dessus (avec text-shadow, notamment), on peut obtenir un rendu tout à fait acceptable.

Par ailleurs, l’article donne une astuce toute simple pour rendre le procédé SEO-friendly et éviter l’apparition de caractères impromptus en cas de non-support de @font-face : utiliser le sélecteur :before. Un article à lire de toute urgence !

Et hop, nous voici revenus au temps béni des icônes en Wingdings dans nos documents Word…

Be Sociable, Share!

Exprimez vous !


(Ne sera pas publié)

Sur ThemeForest