Générateur de sprite CSS
Assemblez plusieurs icônes en une seule sprite sheet PNG et récupérez le code CSS background-position prêt à coller pour afficher chaque icône individuellement dans votre site.
Comment ça marche
Une sprite CSS regroupe plusieurs icônes dans un seul fichier image afin de réduire le nombre de requêtes réseau d'un site web. Chaque icône importée est placée dans une cellule de taille fixe sur une grille, et l'outil génère automatiquement une classe CSS par icône avec la propriété background-position pointant vers sa position exacte dans la grille.
Comment utiliser le code CSS généré ?
Téléchargez le PNG, placez-le à côté de votre feuille de style sous le nom sprite.png (ou adaptez l'URL dans le CSS), copiez le code CSS généré dans votre fichier, puis appliquez la classe correspondante (par exemple class="icon icon-mon-icone") à un élément HTML tel qu'un span.
D'où viennent les noms de classes CSS ?
Le nom de chaque classe est dérivé automatiquement du nom de fichier de l'icône (mis en minuscules, espaces et caractères spéciaux remplacés par des tirets). En cas de doublon, un numéro est ajouté pour garder des noms uniques.
La génération de la sprite et du CSS s'effectue entièrement dans votre navigateur : vos icônes ne sont jamais envoyées à un serveur.