Twitter Bootstrap 3 pulsante di attivazione della navbar con icona diversa

Question

Utilizzando Twitter Bootstrap 3, voglio creare una barra di navigazione aggiuntiva per dispositivi mobili.

Nella barra di navigazione inserirò 2 pulsanti di attivazione su ciascun lato della barra. Il pulsante sinistro avrà l'icona classica "tre barre" e il pulsante destro avrà un'icona diversa all'interno. Voglio che il pulsante destro abbia ".glyphicon .glyphicon-comment" al suo interno. Se l'utente fa clic sul pulsante, attiva anche il secondo menu. Posso attivare il menu ma l'icona non può essere cambiata?

Non è possibile inserire altre icone nel pulsante di attivazione destro? (Ho anche bisogno il testo "qualche link" essere centrato in barra di navigazione)

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

Si dimentica di aggiungere bootstrap-glyphicons.css nel vostro demo jsfiddle. a sostituire il presente

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

Con

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

E poi per ottenere il tuo link nel centro è necessario rimuovere la classe di navbar-brand dal tag a. E poi avvolgi il tuo link con div e quindi applica text-align:center e alcuni padding per ottenere il collegamento in centro.

Answer 2

È possibile raggiungere questo modificando l'arco icona,

Invece di,

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

Usa come,

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

Demo