更改Bootstrap下拉选框图标

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

Answer 1

Bootstrap 5（更新于2023年）

在Bootstrap 5中，将下拉菜单的小三角形改为图标仍然可以按照相同的方式进行操作。不要忘记将data-toggle更改为data-bs-toggle：

<div class="dropdown">
  <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-heart"></i>
  </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>

https://codeply.com/p/oG5SpGwWfL

Bootstrap 4（原始答案）

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

.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>

https://codeply.com/p/BV8WjfEPzb

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

- Zim

---

就这样了！谢谢，ZimSystem。 - Retros

display:none是更好的解决方案，因为如果您删除dropdown-toggle类，则嵌套的下拉菜单（下拉菜单内部的下拉菜单）将无法正常工作。 - astralmaster

工作中！！感谢Zim!! - Karthikeyan Vellingiri

第二种解决方案加上加号 - Leandro Bardelli

如何使用另一个覆盖默认值？ - Leslie Nyahwa

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

Answer 3

我做过类似于被接受的答案的事情，将默认的插入符更改为来自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）现在在样式表中定义，而不是在标记中定义。当然，这是否是一个优点取决于您的情况。

- Jeroen

Answer 4

如果有人通过谷歌搜索如何插入下拉图标，请看这里的一个不错的方法：

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

这里使用了Font Awesome 5，pl-1会在下拉图标左侧添加一些间距，使其更加美观。结果类似于GitHub上的图标：

- stevec

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。内容属性可以设置为任何可用的 Unicode 值。例如，对于 chevron-down（https://fontawesome.com/icons/chevron-down?style=solid），它是 f078。

- Martin

Answer 6

使用其他答案中的建议，我在应用程序的主CSS文件中为dropdown-toggle添加了规则。

关键是当内容被隐藏时，Bootstrap会向具有“dropdown-toggle”的项目添加“collapsed”类，并在内容显示时删除该类。

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

- Zarepheth

Answer 7

对于那些没有使用 font-awesome 的人，可以简单地使用 url() CSS 函数并直接将 SVG 代码放入 CSS 中：

.dropdown-toggle::after{
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>');
  border: none;
  width: 10px;
  height: auto;
  margin-left: 0.4rem;
  vertical-align: middle;
}

您可以从 Font Awesome 下载任何您想要的 SVG：https://fontawesome.com/search?s=solid

- Jeremy Lynch

Answer 8

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

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

- Edmon Belchev