更改下拉圖標引導程序

Question

我想嘗試更改引導程序下拉菜單按鈕上的默認箭頭？這可能嗎？我希望使它像Android的微調圖標的東西：

否則，從FontAwesome什麼的只是一些。我不想使用jQuery/I 必須使用引導下拉菜單： http://getbootstrap.com/components/#dropdowns

我發現了很多類似的要問但更密切相關的jQuery的是我的問題 - 但是，如果一個解決方案已經存在隨時指向我。

Answer 1

當然可以。只需將class「caret」替換爲其他內容並使用css稍微玩一下。相反的：

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
Dropdown 
<span class="caret"></span> 
</button> 

使用：

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
Dropdown 
<i class="fa fa-external-link"></i> 
</button> 

JSFIDDLE

Answer 2

我有幾乎相同的問題，但一直在尋找一個純CSS的解決方案（有一些FontAwesome灑）對.caret選擇。找到我的方式fiddling around與:before僞元素。

.caret { 
    border: none; 
} 

.caret:before { 
    font-family: FontAwesome; 
    content: "\f019"; 
    position: relative; 
    top: -9px; 
}