spritesheet-templates
Version:
Convert spritesheet data into CSS or CSS pre-processor data
37 lines (31 loc) • 839 B
CSS
/*
Icon classes can be used entirely standalone. They are named after their original file names.
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
.icon-sprite-dash-case {
background-image: url(nested/dir/%28%20%27%22%29/spritesheet.png);
background-position: 0px 0px;
width: 10px;
height: 20px;
}
.icon-sprite_snake_case {
background-image: url(nested/dir/%28%20%27%22%29/spritesheet.png);
background-position: -10px -20px;
width: 20px;
height: 30px;
}
.icon-spriteCamelCase {
background-image: url(nested/dir/%28%20%27%22%29/spritesheet.png);
background-position: -30px -50px;
width: 50px;
height: 50px;
}