Come posso aggiungere un'icona per il bootstrap discesa

Question

Ho questo codice

 <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> 

che assomiglia

voglio aggiungere un'icona come insteaqd baricentro del testo come questo

Ho provato questo

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

senza ma non lavorano

Answer 1

Per un pulsante, l'icona ha bisogno di andare all'interno del pulsante come il contenuto del pulsante, così invece di <button type="button" class="glyphicon glyphicon-cog"></button> dovrebbe essere

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

Edit: per aggiungere il punto di inserimento in Bootstrap, utilizzare <span class="caret"></span>

Quindi il risultato finale per ottenere un pulsante con un ingranaggio e accento circonflesso discesa è:

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

Quando ho incollare il codice in homepage di Bootstrap, ottengo questo:

Answer 2

<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> 

È possibile utilizzare questo codice

Answer 3

Basta aggiungere questo arco tag

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

Vedere questo DEMO