I've got a selection of icons I'm using on an activity feed. I'd like to convert them to CSS sprites (a single image containing all the icons) rather than separate files, to cut down on the number of requests required to load the page. They're currently applied to the <li> elements as follows...

ul.activity li {
  line-height: 130%;
  font-size: 16px;
  margin-bottom: 10px;
  background-repeat: no-repeat;
  padding: 2px 0 3px 35px;
}

ul.activity li.accepted {
  background-image: url(/images/icon-accepted.png);
}

ul.activity li.joined {
  background-image: url(/images/icon-joined.png);
}

The problem is, if I put them all alongside each other in a single image, the background area of the <li> is so wide that you'll be able to see them all.

I could add a <span> at the start of each <li> and put the background image on that, but I'd like to avoid the extra markup.

4 answers

7
points

I worked this out. The trick is to space the individual images vertically instead of horizontally on the sprite background image.

So instead of a single background image that looks like:

You'd place them vertically like:

Then you can reference them within the sprite image using background-position in the CSS:

ul.activity li.joined {
  background-position: 0px 0px;
}

ul.activity li.answered {
  background-position: 0px -98px;
}

ul.activity li.asked {
  background-position: 0px -48px;
}
Answered about 8 years ago by Paul Farnell
2
points

Are these sprites clickable? If so, they should be backgrounds of anchors inside the list items (placing them outside of list items will cause cross-browser issues), not simply icons on the list items themselves.

Answered almost 8 years ago by Justin Maxwell
0
points

If you are using this for a background on a list item, I would add the <span>. The example of adding space in between your images in the sprite is great, but how big do you make the gaps? What if they need to be bigger — do you re-do the image?

The <span> is extra markup, yes, but I would consider it harmless.

Answered almost 8 years ago by Shaun Robinson
-1
points

you could also try setting the item to block and giving it a set width.

Answered almost 8 years ago by Paul Cripps