Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

reebr

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

Por , em Desenvolvimento frontend

Recommended Posts

reebr    94

reebr
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

Veja este exemplo que acabo de montar:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			.ico-foo,
			.ico-bar,
			.ico-foobar {
				width: 229px; height: 140px;
				float: left;
				font-size: 0;
			}
			.ico-foo {
				background: url('1.png') no-repeat;
			}
			.ico-bar {
				background: url('2.png') no-repeat;
			}
			.ico-foobar {
				background: url('3.png') no-repeat;
			}
			.ico-foo:hover,
			.ico-bar:hover,
			.ico-foobar:hover {
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		 <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>
	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

Na maioria dos sites, geralmente os ícones são utilizados por meio de tags como <span> ou <i>.

Pelo que sei, o <i> não é literalmente correto, a semântica estabelecida nesse elemento não corresponde ao que normalmente se espera dele. Mas ainda assim, como eu tinha antes visto numa postagem, é a vitória do desempenho sobre a semântica:

 

"A tag <i> corresponde a um trecho ou parte de texto, frase ou palavra, que se destaca do texto comum por algum motivo"

 

Já a tag <span> não corresponde a nada, em sua formação, então a partir dela, eu penso que se pode ser feita alguma coisa ;)

Geralmente para ícones do Bootstrap, por exemplo, se não me engano eles utilizam da tag <span> com uma classe que a preenche com o seletor ::content.

 

Bem, minha sugestão fica no <span>. Pode-se também usar a tag <img>, ou mesmo fazer configurando o background, conforme na resposta acima.

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

É bem simples até, conhece o Font Awesome? Então vamos utilizar ele.
Siga o exemplo de um criado a pouco tempo:

<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="#">Twitter</span></a></li>
</ul>

ul.icons{
cursor: default;
}	
     ul.icons li{
     display: inline-block;
     }
          ul.icons a{
          display: inline-block;
          width: 2em;
          height: 2em;
          line-height: 2em;
          text-align: center;
          border: 0;
          }

Para dar efeito a class: fa-twitter - faça download dos fa no site dele: LINK

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito