What's the most efficient & semantic way to display icons?

Question

Before I begin, I read this very useful question which lays out what's the pros and cons of using <img>'s and background-images. When to use IMG vs CSS

After reading that, however I've been thinking about what's the most efficient & semantic way of displaying an icon. The other question contended that if there's semantic meaning to it such as a warning icon, then it should be displayed as an <img> which I think makes sense in most cases. However, what about the other times?

Here's the only other ways I've seen icons presented:

• Having extra padding on an element (e.g., 20px left padding on an anchor)
• As a separate element (Facebook uses the <i> tag, Google uses the <span> tag)

Using the extra padding method seems to work alright in some cases, but you might run into the problem of exposing other icons in your sprite map if the dimensions of the element don't match up with your icon.

I'm guessing the separate element icon method is probably the most fail-safe way of doing it, but I'm not 100% certain if it's always the best way to do it and what element to use (i, span, other?)

What's your thoughts?

Answer 1

It depends on the circumstance, if the icon is actually designed to give emphasis to some text, then you'd include it in the tag, i.e.

<em>Warning!</em>

And you would add CSS styles to display the icon as the background-image. Technically speaking, you should only be using the <img> tag for items which are semantically images, such as a photograph or diagram. Otherwise for things like headings or icons, stick with changing the background-image.

Answer 2

I like keeping most of my icons as background images and padding the text off from the left to adjust. When there's something that needs attention (such as a warning), you pretty much need a text-based method to convey that information for accessibility's sake, even if you find ways to hide it in the CSS.

I'm against using spans or other elements because it's just not semantic and they aren't necessary.

When I'm building sprites, I always make sure to keep all the icons on the right edge of the sprite so they never have the opportunity to expose rogue sprites (and for variable height issues, you either have to give them plenty of space to grow or put them bottom-right).

Answer 3

The way I would pursue this issue would be by, saving your entire icon set in one image sprite and than call each image on a per-need basis.

For example:

Stackoverlow does something similar by saving all their icons in one sprite like so:

http://sstatic.net/stackoverflow/img/sprites.png

And then it's a simple matter of defining classes for each image with the appropriate background-position that way you can also semantically set appripriate padding and sizing for each individual icon.

All this also ensures a quicker loading of icons.