How does Twitter Bootstrap's icon work? [d

Question

This question already has answers here:

Should I use <i> tag for icons instead of <span>? [closed] (7 answers)

Closed 6 years ago.

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

The actual tag doesn't really matter, just the class. You could use <span class="icon-question-sign></span> or whatever.

<i> is however shorter to write and i can stand for icon.

Answer 2

A tag is just that, a tag. You can use any tag for any purpose but usually you'd want to use semantically correct tags to represent different types of content. The <i> tag is not deprecated but barely used anymore so it's a safe tag for Twitter Boostrap to use for that purpose without worrying about getting overridden with something else.

Answer 3

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  *margin-right: .3em;
}

you can see that the tag doesn't matter, they probably used i because well...it's deprecated. an image tag would not work in this case because they are using a sprite sheet...

.icon-glass {
  background-position: 0      0;
}

Answer 4

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.

Answer 5

The "i" tag is not shorthand for icon. It is used for italic text in HTML4 and has been given slightly different context in HTML5. Bootstrap have abused it and many developers too concerned with speed over quality or semantics similarly abuse it.

Empty tags are semantically wrong. i has nothing to do with icon.

PS using text indent to hide text is not accessible, so dont use it.