更改下拉图标引导程序

Question

我想尝试更改bootstrap下拉菜单按钮上的默认箭头？这有可能吗？我希望它能像android spinner图标一样：

否则，只是来自FontAwesome的东西。我不想使用jQuery / I 必须使用 Bootstrap下拉列表： http://getbootstrap.com/components/#dropdowns

我发现了许多类似于我所问的问题但是它们与jQuery关系更密切 - 但如果已经存在一个解决方案，请随时指出。

Answer 1

当然可以。只需将带有“插入符号”的span替换为其他内容并稍微使用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

我有几乎完全相同的问题，但正在寻找一个针对.caret选择器的纯CSS解决方案（撒上一些FontAwesome）。找到了fiddling around :before伪元素的方式。

.caret {
  border: none;
}

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