As I have my system setup, I bump the position of the sprite background up or down depending on which icon i’d like to display, whether the article title is a story, link, chat, discussion, email address, etc.
I also have the sprite move left and right depending on it’s context on the page. If it’s an article in the sidebar, it uses a smaller icon, or perhaps if it’s hovered, then i move the sprite move over to show the red or green or grey or even white versions of the icon.
The beauty of the system, is that in most browsers, you can define the Y Position of the background image (the sprite), or the X Position for each case like so:
The problem here is that Firefox doesn’t support specifying only one of the axis in this way (thanks @Murtaugh). Apparently they didn’t want to change the spec to allow this sort of thing, and the decision was made to wait until CSS4 (or so it seems, thanks @Murtaugh).
The short of it is that you’ll have to define both positions in every rule, at least if you’re aiming at supporting Firefox… for now.