Làm thế nào tôi có thể thêm biểu tượng để bootstrap thả xuống

Question

tôi có mã này

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

trông giống như

Tôi muốn thêm biểu tượng như insteaqd răng của văn bản như thế này

Tôi đã thử điều này

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

buts không làm việc

Answer 1

Đối với một nút, biểu tượng cần phải đi vào bên trong nút như nội dung của nút, vì vậy thay vì <button type="button" class="glyphicon glyphicon-cog"></button> nó phải được

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

Chỉnh sửa: để thêm dấu mũ vào Bootstrap, bạn sử dụng <span class="caret"></span>

Vì vậy, kết quả cuối cùng để có nút với một răng cưa và caret thả xuống là:

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

Khi tôi dán mã đó vào trang web của Bootstrap, tôi có được điều này:

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> 

Bạn có thể sử dụng mã này

Answer 3

Chỉ cần thêm khoảng này tag

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

Xem này DEMO