Przycisk zmiany paska nawigacyjnego Twitter Bootstrap 3 z inną ikoną

Question

Korzystając z usługi Twitter Bootstrap 3, chcę utworzyć dodatkowy pasek nawigacyjny dla urządzeń przenośnych.

W pasku nawigacyjnym wstawię 2 przyciski przełączające po każdej stronie paska. Lewy przycisk będzie miał klasyczną ikonę "trzy słupki", a prawy przycisk będzie zawierał inną ikonę. Chcę, aby prawy przycisk miał ".glyphicon .glyphicon-comment" w środku. Jeśli użytkownik kliknie przycisk, przełączy się również na drugie menu. Mogę przełączyć na menu, ale ikony nie można zmienić?

Nie mogłem umieścić żadnej innej ikony w prawym przełączniku? (Muszę również "niektóre łącza" tekst wyśrodkowany w pasku nawigacyjnym)

Fiddle: http://jsfiddle.net/mavent/WPfe3/2/

<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation" id=""> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse"> <span class="sr-only">Toggle navigation</span> 
     <i class="icon-user"></i> 
    </button> 
    <a class="navbar-brand" style="text-align:center;" href="">Some link here centered</a> 
    </div> 

    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <li class="active"> 
     <a href="#">AAAA 1</a> 
    </li> 
    <li class="active"> 
     <a href="#">AAAA 2</a> 
    </li> 
    <li class="active"> 
     <a href="#">AAAA 3</a> 
    </li> 
    </div> 

    <div class="collapse navbar-collapse navbar-ex2-collapse"> 
    <li class="active"> 
     <a href="#">BBBB 1</a> 
    </li> 
    <li class="active"> 
     <a href="#">BBBB 2</a> 
    </li> 
    <li class="active"> 
     <a href="#">BBBB 3</a> 
    </li> 
    </div> 
</nav> 

Answer 1

SEE THE DEMO HERE

Zapominasz dodać bootstrap-glyphicons.css w jsfiddle demo. następnie zastąpić ten

<i class="icon-user"></i> 

Z

<i class="glyphicon glyphicon-comment" style="color:#fff"></i> 

A potem dostać link w centrum trzeba usunąć klasę navbar-brand tagu a. Następnie umieść swój link w div, a następnie zastosuj text-align:center i trochę padding, aby uzyskać łącze w środku.

Answer 2

Można to osiągnąć poprzez zmianę rozpiętość ikona,

Zamiast,

<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 

Zastosowanie podobnych

<span class="glyphicon glyphicon-play" style="color:#fff"></span> 

Demo