html - 在 Bootstrap 4 上更改下拉图标

Question

在 Bootstrap 3 上，这非常简单，您只需更改跨度并添加您想要的任何图标即可。但 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 添加一个。

谢谢!

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 类，因为它的唯一目的似乎是显示插入符号图标。