Sprites.png Cheat Sheet?

keesha

Hi is there a kind of a cheat sheet for the vanilla sprites set? I figured out two or three but the rest gave me a headache.

I'm looking for the class of each icon or in particular the class for the sprite below.

Thanks a bunch.

vrijvlinder

The sprites for vanilla come in one sheet and use CSS coordinates to render the icon. Example sprite sheet below

You would look at the vanilla style.css and find sprites using a the find function in your text editor to see the classes and the coordinates. But you would still likely would have to adjust them to your theme.

For example:

.SpEditProfile {
    background-image: url("images/sprites-14-000000.png");
    background-position: -245px -29px;
} 

This would render the edit profile Sprite icon. Look for CSS that has anything with sprite in it. It is not easy to figure out coordinates for a sprite sheet. It takes time and a lot of trial and error.

keesha

Thank you (again) @vrijvlinder very helpful.

vrijvlinder

@keesha

There are some websites now that help you with the hard work . Maybe it can help.

http://spritegen.website-performance.org

this one below is funny

http://gaurav.munjal.us/Universal-LPC-Spritesheet-Character-Generator/

keesha

Thanks Vrijv ^-^

R_J

https://github.com/vanilla/vanilla/tree/master/resources/fonts/vanillicon

There is a preview.html file in there. You might need to copy the files somewhere else in order to be able to access them.

keesha

yay