Generador de sprites CSS
Reúna varios iconos en una única sprite sheet PNG y obtenga el código CSS background-position listo para pegar y mostrar cada icono individualmente en su sitio.
Cómo funciona
Un sprite CSS agrupa varios iconos en un único archivo de imagen para reducir el número de peticiones de red de un sitio web. Cada icono importado se coloca en una celda de tamaño fijo dentro de una cuadrícula, y la herramienta genera automáticamente una clase CSS por icono con la propiedad background-position apuntando a su posición exacta en la cuadrícula.
¿Cómo uso el código CSS generado?
Descargue el PNG, colóquelo junto a su hoja de estilo con el nombre sprite.png (o adapte la URL en el CSS), copie el código CSS generado en su archivo y aplique la clase correspondiente (por ejemplo class="icon icon-mon-icone") a un elemento HTML como un span.
¿De dónde salen los nombres de las clases CSS?
El nombre de cada clase se deriva automáticamente del nombre de archivo del icono (en minúsculas, con los espacios y caracteres especiales sustituidos por guiones). Si hay duplicados, se añade un número para que los nombres sean únicos.
La generación del sprite y del CSS se realiza íntegramente en su navegador: sus iconos nunca se envían a un servidor.