How does Twitter Bootstrap's icon work?

Go To


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?

2012-04-03 21:20
by werdnanoslen
I know, I just wasn't sure if it was that simple. But now I know thanks to you guys. Yay : - werdnanoslen 2012-04-03 21:48
Note that Bootstrap 3 uses <code>span</code> - unor 2013-12-03 11:07


[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's deprecated. an image tag would not work in this case because they are using a sprite sheet...

.icon-glass {
  background-position: 0      0;
2012-04-03 21:27
by David Nguyen
I didn't think i was deprecated in HTML5 - MichaelRushton 2012-12-19 23:14
i doesn't seem to be deprecated in HTML5, see - romario333 2013-04-03 12:10
Sorry, you are right. It was not deprecated instead the use of changed - David Nguyen 2013-05-07 18:02


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:

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.

2012-04-03 21:29
by Wesley Murch
Just as a small reminder/warning: If I recall correctly, hiding text by any means might still be considered bad by search engines. If you want to add more meaning to an icon, you could for example use the title attribute or other accessibility options - All Bits Equal 2013-02-27 13:10


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.

2012-04-03 21:25
by Esailija
It dies if it has inherent styling by the browser (<a>,<div>,<p>...). <i> has inferred semantic meaning which iconic use doesn't particularly fit with so I don't see why one should use <i> over <span> because one's easier to type. In regards to code portability, <i> is uncommon, so there's only potential to dig yourself into Twitter Bootstrap or have code that might not validate - Alastair 2012-12-27 17:08


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.

2013-11-06 17:08
by pixelator
When you say 'accessible,' do you mean like screen reader accessible - shortstuffsushi 2014-06-26 03:06


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.

2012-04-03 21:25
by elclanrs