Html 在 Bootstrap 4 上更改下拉图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43233421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Dropdown Icon on Bootstrap 4
提问by Retros
On Bootstrap 3 this was pretty easy, you just had to change span and add whatever icon you wanted instead. But that doesn't seem the case with Bootstrap 4. Or maybe I'm missing something?
在 Bootstrap 3 上，这很容易，你只需要改变 span 并添加任何你想要的图标。但 Bootstrap 4 似乎并非如此。或者我可能遗漏了什么？
Anyway, here's the basic code for it:
无论如何，这是它的基本代码：
<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>
Can someone please tell me if it's possible to change the dropdown icon on this and how? I want to add one from fontawesome.
有人可以告诉我是否可以更改下拉图标以及如何更改？我想从 fontawesome 添加一个。
Thank you!
谢谢！
回答by Zim
You have to hide the caret icon like this..
你必须像这样隐藏插入符号图标..
.dropdown-toggle::after {
display: none;
}
Then add the fontawesome icon..
然后添加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
http://codeply.com/go/xd2b75iUbM
OR, just remove the dropdown-toggleclass from the button as it's only purpose seems to be showing the caret icon.
或者，只需dropdown-toggle从按钮中删除该类，因为它的唯一目的似乎是显示插入符号图标。
回答by Jeroen
I've done something similar to the accepted answer, changing the default caret to a vertical ellipsis from font-awesome like this:
我做了一些类似于接受的答案，将默认插入符号从 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";
}
Just apply dropdown-toggle-ellipsisas an additional class to your toggle button.
只需dropdown-toggle-ellipsis作为附加类应用到您的切换按钮即可。
The main difference with this solution is that the actual icon (\f142here) is now defined in your stylesheets, not in your markup. Whether that's a plus depends on your situation of course.
此解决方案的主要区别在于实际图标（\f142此处）现在是在您的样式表中定义的，而不是在您的标记中。当然，这是否有利取决于您的情况。
回答by chris45
The default caret isn't an icon, rather a border with these properties:
默认插入符号不是图标，而是具有以下属性的边框：
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
Thus if you set .dropdown-toggle::afterto have border:none!important, you can the use contentto set the icon you want.
因此，如果您设置.dropdown-toggle::after为 have border:none!important，您可以使用content来设置您想要的图标。
The code I use is this:
我使用的代码是这样的：
.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 */
With this method you can also change the FontAwesome icon when the dropdown is visible, thanks to the .show class it adds:
使用此方法，您还可以在下拉列表可见时更改 FontAwesome 图标，这要归功于它添加的 .show 类：
li.menu-item.show a.dropdown-toggle.::after {
content: "\f106"!important /* the different icon */
}
回答by Martin
A solution that allows to keep the HTML as it is and simply adding one CSS rule:
一种允许保持 HTML 原样并简单地添加一个 CSS 规则的解决方案：
.dropdown-toggle::after {
border: none;
font: normal normal normal 12px/1 'Font Awesome 5 Free';
content: "\f078";
vertical-align: 0;
}
This will work with Font Awesome 5. The content property can be set to any available Unicode values. For example for the chevron-down (https://fontawesome.com/icons/chevron-down?style=solid) it's f078.
这将适用于 Font Awesome 5。 content 属性可以设置为任何可用的 Unicode 值。例如，对于 chevron-down ( https://fontawesome.com/icons/chevron-down?style=solid)，它是 f078。
回答by Zarepheth
Using the suggestions in the other answers, I added rules in my app's main CSS file for the the dropdown-toggle.
使用其他答案中的建议，我在应用程序的主 CSS 文件中为下拉切换添加了规则。
The key is that Bootstrap adds the "collapsed" class to items with "dropdown-toggle" when the content is hidden and removes the class when the content is displayed.
关键是当内容隐藏时，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;
}
