Genericons - Des icônes sous forme de police pour votre site

J'aimerai vous faire découvrir Genericons, un set d'icônes pour vos pages web qui a l'énorme avantage de se présenter sous forme de police.

Ce fantastique set d'icônes a été créé par l'équipe Automatic, déjà célèbre pour le développement de WordPress (entre autres) et peut-être utilisé pour n'importe quel type de projet web.

Pourquoi utiliser une police pour afficher des icônes sur mon site ?

• Leur intégration est très simple, elle se fait grâce à quelques lignes de code (HTML et CSS) sans faire appel à aucune image.
• Fini le casse-tête que peut être la création de sprites CSS (si vous ne connaissez pas les sprites, voici un lien intéressant : les sprites CSS).
• Les icônes peuvent être affichées à différentes tailles sans perte de qualité et sans se soucier de leur poids.
• Les icônes sont "customisables" très facilement grâce à quelques lignes de CSS comme tout élément textuel (ombres, couleur, rotation, transparence...).
• Les icônes sous forme de polices sont compatibles avec tous les navigateurs (même les vieilles versions d'IE).
• Les polices d'icônes sont économes en poids et en requêtes HTTP (un seul fichier de quelques ko est appelé pour afficher les icônes. 

Voici une petite démo des possibilités offertes par ce type d'icônes : Icon Fonts are Awesome

Comment intégrer Genericons à mon site ?

1. Téléchargez Genericons.
2. Uploadez le répertoire font sur votre serveur (vous pouvez le renommer ou l'inclure dans un autre répertoire).
3. Copiez le contenu du fichier genericons.css dans votre feuille de style CSS (si vous avez modifié le nom ou le chemin du répertoire font, n'oubliez pas de répercuter ces changements dans votre feuille de style).

Vous êtes à présent prêts à utiliser vos icônes sur votre site.

L'intégration est très simple, il vous suffit d'ajouter deux classes CSS aux éléments HTML concernés, genericon et genericon-{icon-name}.

<a href="http://mondomaine.com" class="genericon genericon-link">Mon lien</a>

Vous pouvez également utiliser les icônes dans des éléments HTML séparés grâce à la balise <i>.

<a href="http://mondomaine.com"><i class="genericon genericon-link"></i> Mon lien</a>

Vous trouverez la liste des noms des icônes dans le fichier genericons.css ou sur le site genericons.com, en cliquant sur une icône vous affichez son nom.

Bon code à tous ;)