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.