2015-05-19 25 views
7

mam ten kodJak mogę dodać ikonę do bootstrap rozwijanej

 <div class="btn-group" dropdown> 
      <button type="button" class="btn btn-danger">Action</button> 
      <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> 
       <span class="caret"></span> 
       <span class="sr-only">Split button!</span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 

który wygląda

enter image description here

chcę dodać ikonę jak zębatej insteaqd Tekstu jak ten

enter image description here

Próbowałem tego

<button type="button" class="glyphicon glyphicon-cog"></button>

buts nie działa

Odpowiedz

9

dla przycisku, ikona musi przejść wewnątrz przycisku jako zawartość przycisk, więc zamiast <button type="button" class="glyphicon glyphicon-cog"></button> powinno być

<button type="button" class="btn"> 
    <span class="glyphicon glyphicon-cog"></span> 
</button> 

Edit: aby dodać karetkę w Bootstrap, użyjesz <span class="caret"></span>

Tak więc wynik końcowy, aby uzyskać przycisk w kółko i rozwijanej karetki jest:

<button type="button" class="btn"> 
    <span class="glyphicon glyphicon-cog"></span><span class="caret"></span> 
</button> 

Kiedy wklej ten kod do głównej Bootstrap jest, mam to: cog button

1
<div class="btn-group" dropdown> 
    <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-cog"></span></button> 
    <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> 
     <span class="caret"></span> 
     <span class="sr-only">Split button!</span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

Można użyć tego kodu

0

Wystarczy dodać ten przedział tag

<span class="glyphicon glyphicon-cog" aria-hidden="true"></span> 

Zobacz tę DEMO