On est souvent amenés lorsque l’on crée un site web à utiliser beaucoup d’icônes. A ce sujet, je vous conseille l’excellent site www.iconfinder.com où je suis sûr que vous trouverez votre bonheur. Pensez à rechercher en anglais !

Dans une optique d’optimisation, il est opportun de regrouper ses icônes dans un seul fichier à l’aide de la technique du CSS Sprite. J’avais déjà abordé cette technique dans un précédent article : les outils pour développeurs web. Grâce à cette technique, vous ne faites plus qu’une seule requête HTTP (sinon, ce sera une requête par fichier…) et vous possédez moins de fichiers. Il suffit alors de mettre en cache chez l’utilisateur cette image, et voilà une bonne partie de la bande passante économisée ! Une belle optimisation, facile à réaliser.

La création du CSS sprite

Pour mes icônes, que j’utilise sur la nouvelle version de mon site personnel (www.antoine-augusti.fr), j’ai choisi d’utiliser des images de dimension 24×24. J’ai redimensionné à ce format les icônes qui étaient plus grandes.

Une fois ceci fait, j’ai utilisé l’excellent site www.csssprites.com pour créer mon CSS Sprite. Il suffit d’ajouter toutes les images au bon format, de choisir dans les options de les aligner comme vous souhaitez, de réduire l’espace entre elles (1px est suffisant) et le site s’occupe de générer votre image et le code CSS associé à celle-ci ! Magique !

Résultat

J’obtiens donc l’image suivante :

Et j’ai créé le CSS suivant :
J’ai associé une simple fonction en PHP :

Que l’on utilise de la manière suivante :

Afin de générer de belles icônes associées aux bons liens, très facilement.

Bien évidemment, vous pouvez créer une autre fonction pour pouvoir utiliser ces icônes sans des liens, par exemple dans le corps de votre site, en complément du contenu !