Ich muss das im Dropdown-Menü von Bootstrap 5 angezeigte Standardsymbol in ein Font Awesome-Zeichen ändern.
Ich habe die Dokumentation gelesen, aber nichts ist von Nutzen. Ich habe erfolglos versucht, das CSS neu zu schreiben.
Wie ändere ich das Dropdown-Symbol in Bootstrap 5?
好吧，我假设你的 html 头部已经有了链接 rel="stylesheet" 。 这是您应该使用的最新版本，但我尝试使用旧版本并且也有效：
然后我抓住了 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>更改图标后检查一切是否按您想要的方式工作，如果是，您可以将答案标记为正确:)