What else html tag can I use for Icon?

Question

Unfortunately I can't use <SPAN> or <I> due to specific custom cms... So, I wonder what any other tag could be suitable to use for icons?

Maybe `img`? Seems like it would make a lot more sense than `i`. — David, Mar 19 '13 at 12:50
@Alex: It might not work with a lot of things that you haven't specified. — David, Mar 19 '13 at 12:52
why dont you ready what already is there? I cant use SPAN or I tags... they are reserved for other things.. So, I would like to use another one, like EM for example.. asking your opinion. — devjs11, Mar 19 '13 at 12:56
Could you elaborate on how they are reserved for other things? If your CMS entirely disallows the use of certain popular HTML elements then it may be time to move on to a different CMS. — James Donnelly, Mar 19 '13 at 13:01
@JamesDonnelly I am sorry for not able to provide you with more details. I thought my question is very simple.. How to avoid span and i tags. Thats not possible, ok. thats the answer, it can be accepted as well, no? I am talking about text tags, similar to span and i like em or s etc. But they are less semantic then — devjs11, Mar 19 '13 at 13:35
Span is the perfectly semantic tag to use in this case. The HTML5 specification doesn't include workarounds for people unable to use certain tags as there shouldn't ever be a situation where specific tags are unusable. I modified my answer earlier to give a workaround for your span removal issue. — James Donnelly, Mar 19 '13 at 13:49

James Donnelly · Accepted Answer · 2013-03-19T13:25:39.530

3

Well for starters <i> wouldn't really be appropriate for an icon as i denotes alternative voice or mood. This may depend on where and how the icon is being used, however.

<span> would be more appropriate if the icon is font-based.

<img> would be more appropriate if the icon is image-based.

Sounds like your issue may be to do with pre-existing CSS rules surrounding i and span tags. You can simply overwrite them:

span {
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    /* etc... */
}

Edit from comments:

To prevent the CMS removing the empty span tag, simply give it some content:

<span class="icon">&nbsp;</span>

This   shouldn't exceed the height or width of your icon, so wouldn't affect the styling.

edited Mar 19 '13 at 13:25

answered Mar 19 '13 at 12:53

James Donnelly

126,410
34
208
218

Technically you're correct about but frameworks like Bootstrap use it for their icons [Bootstrap Icons](http://twitter.github.com/bootstrap/base-css.html#icons). – Brett Postin Mar 19 '13 at 12:55
no, the issue is that I cant use SPAN or I tags... they are reserved for other things.. So, I would like to use another one, like EM for example.. – devjs11 Mar 19 '13 at 12:55
2

@Poz that doesn't mean that they are correct. – James Donnelly Mar 19 '13 at 12:57
1

@Alex `` is used for [emphasised text](http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element). `span` is most appropriate as "[the span element doesn't mean anything on its own](http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element)". – James Donnelly Mar 19 '13 at 12:59
@JamesDonnelly I would love to use span, but its reserved by the system and cant be empty or it will be removed. – devjs11 Mar 19 '13 at 13:01
@JamesDonnelly I agree, as explained in this [answer](http://stackoverflow.com/a/10001692/295813). However the OP doesn't seem too concerned with perfectly semantic markup so I guess it comes down to whatever gets the job done. – Brett Postin Mar 19 '13 at 13:01
@Poz going by his comment [here](http://stackoverflow.com/questions/15499968/what-else-html-tag-can-i-use-for-icon/15500085?noredirect=1#comment21945197_15500008) I think he is concerned with semantics. – James Donnelly Mar 19 '13 at 13:04
1

@Alex that sounds more like a CMS bug than anything. A CMS shouldn't intentionally delete empty elements, regardless of what they are. You could always ` `. – James Donnelly Mar 19 '13 at 13:06

score 1 · Answer 2 · answered Mar 19 '13 at 12:56

1

If you are talking about using background images, I always used the good ol' div, as it's unlikely that you will have any css collisions

answered Mar 19 '13 at 12:56

Bill

3,478
23
42

`div` is a sectioning element and not text-level semantics, thus the use of `span` or `img`. Icons shouldn't really be background images anyway as they are foreground design elements. – James Donnelly Mar 19 '13 at 13:01

What else html tag can I use for Icon?

2 Answers2