Menu
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; }
736
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
The I element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.
<span> is more semantically correct, because it has no semantics.
To add icon inside the input element the <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages or in some specific area, it needs the fontawesome link inside the head tag. The fontawesome icon can be placed by using the fa prefix before the icon's name.
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.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
