Menu
I'm just curious about which one is better to use in order to add a custom icon next to my links.
<ul>
<li><a href=""><i class="home"></i> Home</a></li>
<li><a href=""><i class="downloads"></i> Downloads</a></li>
</ul>
or
<ul>
<li><a href=""><span class="home"></span> Home</a></li>
<li><a href=""><span class="downloads"></span> Downloads</a></li>
</ul>
Thanks.
332
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.
Span tags are used on small segments of text, links, images, and other HTML elements that appear inline with the surrounding content. To summarize, a div tag creates a block-level element while a <span> tag wraps around an inline element.
The span tag is a paired tag means it has both open(<) and closing (>) tags, and it is mandatory to close the tag.
<i> isn’t the icon tag, it’s the italic tag, and it doesn’t make much difference which you pick. <span> is more semantically correct, because it has no semantics.
198
From the HTML5 spec:
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.
Use the span tag if you want to be 'politically' correct.
However, Holly's answer puts up an argument for its use: Should I use <i> tag for icons instead of <span>?
32
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
