更改下拉图标引导程序

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