1

Galera eu tenho esse código:

<i class="glyphicon glyphicon-arrow-right"></i>

que é um ícone do bootstrap de uma seta para o lado. Eu quero fazer com que quando uma pessoa conectada no site esteja acessando pelo celular, ele exiba esse código:

<i class="glyphicon glyphicon-arrow-down"></i>

ao invés de exibir o outro, alguém sabe como posso fazer isso?

2 Respostas 2

4

A melhor e mais simples maneira de se fazer isso, é criar o teu próprio ícone no qual será a seta para a direita por padrão em Desktops e quando o ecrã for mais pequeno (ou seja na versão mobile) o ícone se transformará na seta para baixo. Por outras palavras:

<i class="glyphicon meuIcon"></i>
.meuIcon:before {
    content:"\e092";
}

/* Quando o tamanho do ecrã for igual ou menor a 480px, muda o ícone transformando-o numa seta para baixo com o código e media query abaixo */
@media screen and (max-width: 480px) {
    .meuIcon:before {
        content:"\e094";
    }
}

Exemplo online no jsFiddle: http://jsfiddle.net/m055Lkfb/

1
  • 1
    exatamente da forma que eu queria, só ajustei o width para o 768 q é quando a linha quebra Commented 11/11/2015 às 4:16
2

Você pode utilizar o Responsive Utilities do bootstrap:

<i class="glyphicon glyphicon-arrow-right hidden-xs"></i>
<i class="glyphicon glyphicon-arrow-down hidden-lg"></i>

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .