更改 Bootstrap 4 上的下拉图标

Question

在 Bootstrap 3 上这很简单，你只需要改变 span 并添加你想要的任何图标。但 Bootstrap 4 似乎并非如此。或者我可能遗漏了什么？

无论如何，这是它的基本代码：

 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

有人可以告诉我是否可以更改下拉图标以及如何更改？我想从 fontawesome 添加一个。

谢谢！

原文由 Retros 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你必须像这样隐藏插入符号图标..

 .dropdown-toggle::after {
    display: none;
}

然后添加 fontawesome 图标..

 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-heart"></i>
</button>

http://codeply.com/go/xd2b75iUbM

或者，只需从按钮中删除 dropdown-toggle 类，因为它的唯一目的似乎是显示插入符号图标。

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

默认插入符号不是图标，而是具有以下属性的边框：

 border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;

因此，如果您将 .dropdown-toggle::after 设置为 border:none!important ，则可以使用 content 来设置您想要的图标。

我使用的代码是这样的：

 .dropdown-toggle::after {
  border: none!important;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f107"!important; /* the desired FontAwesome icon */
  vertical-align: 0; /* to center vertically */
}

使用此方法，您还可以在下拉菜单可见时更改 FontAwesome 图标，这要归功于它添加的 .show 类：

 li.menu-item.show a.dropdown-toggle.::after {
  content: "\f106"!important /* the different icon */
}

原文由 chris45 发布，翻译遵循 CC BY-SA 4.0 许可协议