如何更改 Bootstrap 5 中的下拉图标?
P粉396248578
P粉396248578 2024-01-10 17:05:57
0
1
478

我需要将 Bootstrap 5 下拉菜单中显示的默认图标更改为 Font Awesome 字符。

我已阅读文档,但没有任何用处。我尝试过重写CSS,但没有成功。

如何更改 Bootstrap 5 中的下拉图标?

P粉396248578
P粉396248578

全部回复(1)
P粉752812853

好吧,我假设你的 html 头部已经有了链接 rel="stylesheet" 。 这是您应该使用的最新版本,但我尝试使用旧版本并且也有效:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

然后我抓住了 Bootstrap 5 下拉菜单并添加了一个 custom-dropdown 类:

<div class="dropdown custom-dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>

然后在 css 文件中创建以下内容:

.custom-dropdown .dropdown-toggle::after {
  content: '\f1b2'; /* Replace this with the desired Font Awesome icon code */
  font-family: 'Font Awesome 5 Free'; /* Specify the Font Awesome font-family */
  font-weight: 900; /* Adjust the font weight if needed */
  border-top: 0;
  vertical-align: middle;
}

我以前从未使用过 font Awesome,但在不使用 border-top 0 的情况下,我看到图标上方有一个白色条。这就是为什么我使用 bordertop 和 Verticalalign 来对齐图标。

或者您可以简单地在 CSS 中执行此操作:

.custom-dropdown .dropdown-toggle::after {
  display: none;
}

然后使用这样的图标:

<div class="dropdown custom-dropdown">
                <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                    <i class="fa-solid fa-cube"></i>
                </button>
                <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a className="dropdown-item" href="#">Action</a></li>
                    <li><a className="dropdown-item" href="#">Another action</a></li>
                    <li><a className="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>

更改图标后检查一切是否按您想要的方式工作,如果是,您可以将答案标记为正确:)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板