Change Bootstrap icon in Mobile version

Asked

Viewed 349 times

1

Guys I have this code:

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

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

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

instead of flaunting the other, someone knows how I can do it?

html css twitter-bootstrap

2 answers

4


The best and simplest way to do that is to create your own icon where right arrow by default in Desktops and when the screen is smaller (i.e., 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: http://jsfiddle.net/m055Lkfb/

  • 1

    exactly the way I wanted, I just adjusted the width for the 768 q is when the line breaks

2

You can use the Responsive Utilities of bootstrap:

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

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.