国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Wie ?ndere ich das Dropdown-Symbol in Bootstrap 5?
P粉396248578
P粉396248578 2024-01-10 17:05:57
0
1
771

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?

P粉396248578
P粉396248578

Antworte allen(1)
P粉752812853

好吧,我假設(shè)你的 html 頭部已經(jīng)有了鏈接 rel="stylesheet" 。 這是您應(yīng)該使用的最新版本,但我嘗試使用舊版本并且也有效:

<link rel="stylesheet" >

然后我抓住了 Bootstrap 5 下拉菜單并添加了一個(gè) custom-dropdown 類(lèi):

<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 文件中創(chuàng)建以下內(nèi)容:

.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;
}

我以前從未使用過(guò) font Awesome,但在不使用 border-top 0 的情況下,我看到圖標(biāo)上方有一個(gè)白色條。這就是為什么我使用 bordertop 和 Verticalalign 來(lái)對(duì)齊圖標(biāo)。

或者您可以簡(jiǎn)單地在 CSS 中執(zhí)行此操作:

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

然后使用這樣的圖標(biāo):

<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>

更改圖標(biāo)后檢查一切是否按您想要的方式工作,如果是,您可以將答案標(biāo)記為正確:)

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage