2

Em minhas páginas, tenho vários links como o a seguir:

<a href="/Home/Index" class="btn-sm btn-success" role="button">
  <i class="glyphicon glyphicon-home"></i> Home
</a>

Ele mostra um ícone na frente do texto que, quando clicados, redirecionam para um caminho.

Gostaria que, dependendo do tamanho da tela, esse texto aparecesse ou deixasse de aparecer, nesse caso, mantendo apenas o ícone.

Qual a melhor prática para fazer isso via CSS?

9
  • @mediaquerie...
    – MagicHat
    24/11/2017 às 11:12
  • Sim, sei que existe, ia até comentar, porém como eu faria? Tem como "apagar" o texto do link através do css dentro do @mediaquerie? Não sei qual seria a melhor maneira de fazer...
    – user88521
    24/11/2017 às 11:19
  • 1
    Na minha opinião a melhor prática para seu problema é usar media queries. ai você pode manipular seus elementos de acordo com os tamanhos desejados. dê uma olhada nesse link: tableless.com.br/introducao-sobre-media-queries @Rafael
    – arllondias
    24/11/2017 às 12:32
  • 1
    Rafael sem colocar uma tag no texto do menu acho que vc não vai conseguir. Mas se colocar a tag não for problema, posso fazer um modelinho simples de CSS que já resolve.
    – hugocsl
    24/11/2017 às 13:55
  • 1
    Coloque uma tag span entre o texto home... e use a media query para ocultar somente a tag span, ai o icone irá permanecer 24/11/2017 às 14:02

1 Resposta 1

2

A melhor prática para modificar o estilo dependendo do tamanho da tela é por media queries.

Esse CSS oculta o texto e exibe apenas o ícone quando a largura da página é menor ou igual a 768 pixels, como o ícone é branco foi necessário adicionar um background-color nele:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
@media (max-width: 768px){
  .element {
    visibility: hidden; /* Oculta o elemento */
  }
  
  .element i{ /* Seleciona somente o ícone dentro do link */
    background-color: #5cb85c;
    border-radius: 2px;
    padding: 5px;
    visibility: visible; /* Mostra somente o ícone */
  }
}
</style>
<a href="/Home/Index" class="element btn-sm btn-success" role="button"><i class="glyphicon glyphicon-home"></i> Home</a>

Você deve fazer log-in para responder a esta pergunta.