Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tenho um menu de navegação com alguns ícones utilizando font-face. Cada item desse menu tem:
.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?
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>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.](#post_id_2105135)Abraços!
É 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
Eu tbm utilizaria algo assim.
Acho que é a única maneira mesmo.