如何更改 Bootstrap 5 中的下拉圖示？

Question

我需要將 Bootstrap 5 下拉選單中顯示的預設圖示變更為 Font Awesome 字元。

我已閱讀文檔，但沒有任何用處。我嘗試過重寫CSS，但沒有成功。

如何更改 Bootstrap 5 中的下拉圖示？

Answer 1

好吧，我假設你的 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>

更改圖示後檢查一切是否按您想要的方式工作，如果是，您可以將答案標記為正確:)