5

I have an icon set and CSS code to bind the icons to an element, but I can't get the "i" tag to work with the icon set w/o filling it with content. Do I have to add custom code for the tag?

I've seen Twitter Bootstrap use the "i" tag for icons. Also, I've tried the span tag, and that doesn't work either. It works when I use "li" or "div" tags, tho.

What am I missing? Thanks in advance!

This does not work

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

This 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; }
informatik01
  • 16,038
  • 10
  • 74
  • 104
Fredrik Westerlund
  • 133
  • 1
  • 2
  • 10
  • why not use a div with `font-style:italic`, i don't believe i is a block element. – DevZer0 Jul 04 '13 at 13:23
  • I want to use icons inside header tags, and DIV is not a valid element inside headers. I don't want the italic text, please read my question again. – Fredrik Westerlund Jul 04 '13 at 13:25
  • The twitter bootstrap uses this tag because CSS was made for this. In it there is a "mapping" of the position of the image which is the desired part. See [CSS Sprites](http://css-tricks.com/css-sprites/) – PiLHA Jul 04 '13 at 13:27
  • PiLHA, if you read my question you can also see that I've made a spritemap for it. – Fredrik Westerlund Jul 04 '13 at 13:28

4 Answers4

13

The <i> tag is used to signify that the text within should be italic. It doesn't make sense to use it in this context.

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

Fiona - myaccessible.website
  • 14,481
  • 16
  • 82
  • 117
  • Thanks, I only tried display:block. inline-block worked! the i tag is semantic with "icon" and uses less text, it's a good way to bind icons. – Fredrik Westerlund Jul 04 '13 at 13:26
  • @FredrikSkägglösWesterlund It may be a good idea to use `` with `display:inline-block` instead if you need to support IE7, which [only supports `inline-block` on elements that are `display:inline` by default](http://caniuse.com/inline-block). – 0b10011 Sep 23 '13 at 15:08
4

You can just use an img tag to display the icon. This makes more sense semantically since it is embedded content after all, and the icon will be palpable.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
2

Semantics aside, you're not seeing anything because the <i/> element is inline by default. You likely want to add display: inline-block; to the .icon ruleset to match how Bootstrap renders their icons.

If you care about semantics, use a <div/> or <span/> instead.

André Dion
  • 21,269
  • 7
  • 56
  • 60
  • yes, thanks! I think the tag is more suited for icons in my context. I also followed another thread here that argues for the benefit of tag for icons. http://stackoverflow.com/questions/11135261/i-tag-for-icons – Fredrik Westerlund Jul 04 '13 at 13:34
  • I don't think it's as big of a deal as some people are making it out to be. The semantics around `` (and ``) are fairly loosely defined, as is evident in the thread you linked to. An `` without text carries no intrinsic meaning, so it's perfectly acceptable (IMO) to use that as a way to show purely presentational elements. – André Dion Jul 04 '13 at 13:40
  • I think the italic tag is supposed to be deprecated and replaced with anyway so why not put the unemployed to good use. – jimeast Apr 06 '18 at 21:00
1

Brthr, just add a 'display: inline-block' to your '.icon', it might work

Salih K
  • 701
  • 2
  • 12
  • 31