更改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://www.codeply.com/go/xd2b75iUbM

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

Answer 2

我做了一些类似于接受的答案，将默认插入符号从 font-awesome 更改为垂直省略号，如下所示：

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

.dropdown-toggle-ellipsis::before {
  display: inline-block;
  padding: 0.5rem;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f142";
}

只需dropdown-toggle-ellipsis作为附加类应用到您的切换按钮即可。

此解决方案的主要区别在于实际图标（\f142此处）现在是在您的样式表中定义的，而不是在您的标记中。当然，这是否有利取决于您的情况。

Answer 3

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

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

因此，如果您设置.dropdown-toggle::after为 have 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 */
}