Gerador de sprite CSS
Reúna vários ícones em uma única sprite sheet PNG e obtenha o código CSS background-position pronto para colar, para exibir cada ícone individualmente no seu site.
Como funciona
Uma sprite CSS reúne vários ícones em um único arquivo de imagem para reduzir o número de requisições de rede de um site. Cada ícone importado é colocado em uma célula de tamanho fixo em uma grade, e a ferramenta gera automaticamente uma classe CSS por ícone, com a propriedade background-position apontando para a posição exata dele na grade.
Como usar o código CSS gerado?
Baixe o PNG, coloque-o ao lado da sua folha de estilo com o nome sprite.png (ou ajuste a URL no CSS), copie o código CSS gerado para o seu arquivo e depois aplique a classe correspondente (por exemplo class="icon icon-mon-icone") a um elemento HTML, como um span.
De onde vêm os nomes das classes CSS?
O nome de cada classe é derivado automaticamente do nome do arquivo do ícone (em minúsculas, com espaços e caracteres especiais substituídos por hifens). Em caso de duplicidade, um número é acrescentado para manter os nomes únicos.
A geração da sprite e do CSS acontece inteiramente no seu navegador: seus ícones nunca são enviados a um servidor.