Change Bootstrap icon in the Mobile version

Navigation
1

I have this code: 

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

which is a bootstrap icon from an arrow to the side. I want to make sure that when a person connected to the site is accessing the mobile phone, it displays this code: 

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

Instead of displaying the other, does anyone know how I can do this?

    
asked by anonymous 11.11.2015 / 04:28

2 answers

4

The best and simplest way to do this is to create your own icon which will be the right arrow by default in Desktops and when the screen is smaller (ie in the mobile version) the icon will become the down arrow . In other words: 

<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";
    }
}

Online example in jsFiddle: link

    
11.11.2015 / 05:02
2

You can use the bootstrap Responsive Utilities : 

<i class="glyphicon glyphicon-arrow-right hidden-xs"></i>
<i class="glyphicon glyphicon-arrow-down hidden-lg"></i>
    
11.11.2015 / 17:11
Calculate quantity by integer Null parameter in route