How does Twitter Bootstrap's icon <i ...> work? [duplicate]

Question

When placing an icon on a page, it seems that it somehow overrode the old, half-deprecated italics <i> tag to use as a special image tag. Either that or it makes me think <i ...> is a lazy interpretation of <img ...>.

How does this work when all it requires is a stylesheet, and can I override other tags for my own uses like this?

Answer 1

Twitter bootstrap is just (ab)using empty <i> elements in their example markup for CSS Sprites. It doesn't matter which tag is used, but HTML5 did give <i> and <b> new life and semantic meaning:

http://www.w3.org/TR/html5/the-i-element.html

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

Empty elements are always a sign of "less-than-perfectly-semantic" markup, but at the end of the day many people just use what gets the job done. The argument could be made that the icons are presentation and not content, so <img> may not be entirely appropriate and background images are better (plus less http requests).

If you like to get real persnickety like I do from time to time, you could put some text in there:

<span class="icon icon-ok">OK</span>

Then style it with CSS to hide the text with something like text-indent:-999px (bootstrap probably already does this). So basically, it's just styled as a block element with a fixed height and width, with a background image.