By using Twitter Bootstrap 3, I want to create an additional navbar for mobile.

In navbar I will put 2 toggle buttons in each side of bar. Left button will have classical three bar icon, and right button will have a different icon inside. I want right button to have .glyphicon .glyphicon-comment inside it. If the user clicks the button it will also toggle for second menu. I can toggle for the menu but icon can't be changed ?

I couldn't put any other icon inside right toggle button ? (I also need the some link text to be centered in navbar)

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>