Semantically, which tag should I use for icons?

Question

I have a navigation menu with some icons using @font-face. Each item in this menu has:

• the icon (with ::before);
• text, explaining the function of that link.

.It turns out that when the page is loaded on a smaller device, I want the text to "disappear" and only the icon shown. I have the following structure:

<nav>
  <ul>
    <li><a class='ico-foo' href='#'>Visitar Foo</a></li>
    <li><a class='ico-bar' href='#'>Visitar Bar</a></li>
    <li><a class='ico-foobar' href='#'>Visitar FooBar</a></li>
  </ul>
</nav>

Normal, like most structures. It turns out, if I try to hide the contents of the tag <a> the icon in ::before will not appear. For example, I tried to use text-indent: -999px; and it didn’t work because the icon accompanies this rule and "some".

Well, the solution I found to hide the text was to put it inside a <span>, so when the page opens on a smaller device I give a display:none at that tag <span> and so is shown only the icons as I would like. The structure then:

<nav>
  <ul>
    <li><a class='ico-foo' href='#'><span>Visitar Foo</span></a></li>
    <li><a class='ico-bar' href='#'><span>Visitar Bar</span></a></li>
    <li><a class='ico-foobar' href='#'><span>Visitar FooBar</span></a></li>
  </ul>
</nav>

All right. My question is: Is that the best tag to do this? I’m worrying about little?

Some websites (mainly those created using bootstrap) use the tag for icons, but according to this question use is only to save characters.

Any suggestions for doing this in a better way?

Answer 1

The tag <span/> is in fact the most commonly used tag to deal with problems like what you refer to.

The HTML element <span> is a container Online Generic for phrasing content , which does not represent anything by nature.

It is an element without any added meaning associated with its use, unlike other elements like <em/> and <i/> they have a meaning behind their use, that is, they were created with a specific purpose, whereas the element <span/> was created to allow attributing formatting via CSS, referencing language, among others, to certain content without this content being influenced by its use.

In your particular case you want to manipulate the text via CSS, nothing better than to involve it with a <span> to abstract the impact of CSS from the rest of your Markup and focus the same solely on the text.

About the way you’re acting, the display:none; seems to me the best course to take.

Other methods require some care:

• Negative indentation

  Can be used in some scenarios, for example text-indent:-999px but very careful because the visitor’s screen can be larger than the text-indent given and the text will appear in an inappropriate location.

• Font size zero

  It can be used in some scenarios, but the crawlers ^(English), as is the case with Google find this incorrect and against SEO rules what will leave a flag on the negative page.