Semanticamente, qual tag devo usar dentro de um <a> para ícone

Tenho um menu de navegação com alguns ícones utilizando font-face. Cada item desse menu tem:

• o ícone (com ::before);
• texto, explicando qual a função daquele link.

.Acontece que, quando a página for carregada em um dispositivo menor, quero que o texto "desapareça" e seja mostrado somente o ícone. Tenho a seguinte estrutura:

<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, como a maioria das estruturas. Pois bem, a solução que encontrei para esconder o texto foi colocar ele dentro de um <span>, assim quando a página é aberta em um dispositivo menor eu dou um 'display:none' nessa tag <span> e assim é mostrado somente os ícones como eu gostaria. A estrutura então:

<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>

Beleza. A minha dúvida é: Essa é a melhor tag para fazer isto? Estou me preocupando com pouca coisa? :lol:

Alguma sugestão pra fazer isso de uma forma melhor?