Twitter Bootstrap 3異なるアイコンのnavbarトグルボタン

Question

Twitter Bootstrap 3を使用して、モバイル用の追加のナビゲーションバーを作成したいと思います。

navbarでは、バーの両側に2つのトグルボタンを配置します。左ボタンにはクラシックな「3つのバー」アイコンがあり、右ボタンには別のアイコンが表示されます。右ボタンに ".glyphicon .glyphicon-comment"と入力してください。ユーザーがボタンをクリックすると、2番目のメニューも切り替わります。メニューを切り替えることはできますが、アイコンは変更できません。

右のトグルボタンの中に他のアイコンを置くことができませんでしたか？あなたのjsfiddleデモでbootstrap-glyphicons.cssを追加することを忘れ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

：

フィドル（私はまた、ナビゲーションバーの中央に位置する "いくつかのリンク" のテキストを必要とします）。 はその後

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

でこの

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

を交換し、その後、中央にあなたのリンクを取得するには、あなたのaタグからクラスnavbar-brandを削除する必要があります。そしてdivとあなたのリンクをラップし、text-align:centerといくつかのpaddingを適用して、中心にリンクを取得します。

Answer 2

あなたは、アイコンのスパンを変更することによって、これを達成することができ、代わりの

、

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

使用のように、このような

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

Demo