更改 Bootstrap 4 上的下拉图标
Posted
技术标签:
【中文标题】更改 Bootstrap 4 上的下拉图标【英文标题】:Changing Dropdown Icon on Bootstrap 4 【发布时间】:2017-08-31 04:47:35 【问题描述】:在 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 中添加一个。
谢谢!
【问题讨论】:
【参考方案1】:如果其他人通过谷歌搜索到达如何插入下拉图标,这是一个不错的方法:
<span style="color:black;" class="fa fa-caret-down pl-1"></span>
这使用字体 awesome 5,pl-1
在下拉图标的左侧添加了一点填充,因此它的间距更合适。
结果是一个与 GitHub 上的图标非常相似的图标:
【讨论】:
【参考方案2】:只需输入 css 边框无。箭头由边框制成,如果您删除边框,则没有箭头。移除边框后,您可以添加自己的图标。
.dropdown-toggle::after
border: none;
content: '\icon';
【讨论】:
【参考方案3】:默认插入符号不是图标,而是具有以下属性的边框:
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 */
【讨论】:
【参考方案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>
http://codeply.com/go/xd2b75iUbM
或者,只需从按钮中删除 dropdown-toggle
类,因为它的唯一目的似乎是显示插入符号图标。
【讨论】:
就是这样!谢谢你,ZimSystem。 display:none 是一个更好的解决方案,因为如果您删除 dropdown-toggle 类,那么嵌套的下拉菜单(下拉菜单中的下拉菜单)将不起作用。 工作!!谢谢齐姆!! 第二个解决方案的加号 如何用另一个覆盖默认值?【参考方案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。
【讨论】:
【参考方案6】:使用其他答案中的建议,我在应用的主 CSS 文件中为下拉切换添加了规则。
关键是Bootstrap在内容隐藏时将“collapsed”类添加到具有“dropdown-toggle”的项目中,并在显示内容时删除该类。
/* 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;
【讨论】:
【参考方案7】:我做了类似于接受的答案的事情,将默认插入符号从 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
)现在是在样式表中定义的,而不是在标记中。当然,这是否是一个加分取决于您的情况。
【讨论】:
以上是关于更改 Bootstrap 4 上的下拉图标的主要内容,如果未能解决你的问题,请参考以下文章