在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添加一个。
8条答案
按热度按时间zpqajqem1#
在Bootstrap 5中,将下拉式插入符号更改为图标仍然以相同的方式工作。不要忘记将
data-toggle
更改为data-bs-toggle
:https://codeply.com/p/oG5SpGwWfL
你必须像这样隐藏插入符号图标。
然后添加fontawesome图标。
https://codeply.com/p/BV8WjfEPzb
或,只需从按钮中删除
dropdown-toggle
类,因为它的唯一目的似乎是显示插入符号图标。xienkqul2#
默认的插入符号不是图标,而是具有以下属性的边框:
因此,如果您将
.dropdown-toggle::after
设置为具有border:none!important
,则可以使用content
来设置所需的图标。我使用的代码是这样的:
使用此方法,您还可以在下拉列表可见时更改FontAwesome图标,这要归功于它添加的.show类:
dnph8jn43#
我做了一些类似于公认答案的事情,将默认的插入符号从font-awesome改为垂直省略号,如下所示:
只需将
dropdown-toggle-ellipsis
作为一个额外的类应用于切换按钮。这个解决方案的主要区别是,实际的图标(这里是
\f142
)现在是在样式表中定义的,而不是在标记中定义的。当然,这是否是一个优点取决于你的情况。yzxexxkh4#
一个解决方案,允许保持HTML不变,只需添加一个CSS规则:
这将与Font Awesome 5一起使用。content属性可以设置为任何可用的Unicode值。例如,对于chevron-down(https://fontawesome.com/icons/chevron-down?style=solid),它是f078。
5vf7fwbs5#
如果其他人通过谷歌搜索来了解如何插入下拉图标,这里有一个不错的方法:
它使用了awesome 5字体,
pl-1
在下拉图标的左边添加了一点填充,这样它的间距就更好了。结果是一个与GitHub上的图标非常相似的图标:
xxb16uws6#
使用其他答案中的建议,我在应用程序的主CSS文件中添加了下拉切换规则。
关键是Bootstrap在隐藏内容时使用“下拉切换”将“折叠”类添加到项目中,并在显示内容时删除该类。
e5nqia277#
在CSS边框中输入none。箭头是由边框组成的,如果你去掉边框,就没有箭头了。移除边框后,您可以添加自己的图标。
zyfwsgd68#
对于那些不使用font-awesome的人,你可以简单地使用
url()
CSS函数,并将SVG代码直接放入CSS中:您可以从font awesome下载任何您想要的SVG:https://fontawesome.com/search?s=solid