更改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

使用其他答案中的建议，我在应用程序的主CSS文件中为下拉菜单添加了规则。

关键是Bootstrap在隐藏内容时将“折叠”类添加到带有“下拉式切换”的项目中，而在显示内容时将其删除。

/* Align Bootstrap default Dropdown icon closer to vertical center of collapsed icon. */
.dropdown-toggle::after {
    vertical-align: 0.15em;
}

/* Make Dropdown icon point right when collapsed, with Browser default vertical alignment. */
.collapsed.dropdown-toggle::after {
    border-top: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-bottom: 0.3em solid transparent;
    border-right: 0;
    vertical-align: unset;
}

Answer 4

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

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 */
}

Answer 5

一种解决方案，允许将HTML保持不变，并只需添加一条CSS规则：

.dropdown-toggle::after {
  border: none;
  font: normal normal normal 12px/1 'Font Awesome 5 Free';
  content: "\f078";
  vertical-align: 0;
}

这将与Font Awesome 5一起使用。content属性可以设置为任何可用的Unicode值。例如，人字形下移（https://fontawesome.com/icons/chevron-down?style=solid）为f078。

Answer 6

只需输入 css border none。箭头是由边框制成的，如果您删除边框，则没有箭头。移除边框后，您可以添加自己的图标。

.dropdown-toggle::after{
 border: none;
 content: '\icon';
}

Answer 7

如果其他人通过谷歌搜索来了解如何插入下拉图标，这是一个不错的方法：

<span style="color:black;" class="fa fa-caret-down pl-1"></span>

这使用了很棒的 5 字体，并且 pl-1 在下拉图标的左侧添加了一点填充，以便更好地间隔。

结果是一个与 GitHub 上的非常相似的图标：