Sprites.png Cheat Sheet?

keesha · September 2016

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 · September 2016

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.