How to use the <i> tag with icons?

Question

I have an icon set and CSS code to attach icons to an element, but I can’t get the "i" tag to work with the icon set without filling it with content. Should I add custom code for the tag?

I saw Twitter Bootstrap use the "i" tag for icons. In addition, I tried the span tag, and this does not work either. It works when I use the tags "li" or "div", tho.

What am I missing? Thanks in advance!

It does n’t work

<i class="icon icon-accessibility"></i> 

This one works

 <i class="icon icon-accessibility">BLAH</i> 

example of my CSS

 .icon {background: url('/images/icons.png') no-repeat top left;} .icon-accessibility{ background-position: 0 0; width: 32px; height: 32px; } 

Answer 1

The <i> used to indicate that the text inside should be in italics. In this context, it makes no sense to use it.

If you still want to save it and not use something like a div , the problem is that the <i> is an inline element and not a block element like a div . Add display: inline-block; into your CSS and it will work.

Answer 2

Brthr, just add “display: inline-block” to your “.icon”, it may work

Answer 3

Unlike semantics, you don’t see anything, because by default the element is <i/> inline . You probably want to add display: inline-block; into the .icon rule set to match how Bootstrap displays its icons.

If you need semantics, use <div/> or <span/> instead.

Answer 4

You can simply use the img tag to display the icon. This is more important semantically, because in the end it’s embedded content, and the icon will be tangible.