.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 來對齊圖示。
好吧,我假設你的 html 頭部已經有連結了 rel="stylesheet" 。 這是您應該使用的最新版本,但我嘗試使用舊版本並且也有效:
然後我抓住了 Bootstrap 5 下拉選單並添加了一個 custom-dropdown 類別:
然後在 css 檔案中建立以下內容:
我以前從未使用過 font Awesome,但在不使用 border-top 0 的情況下,我看到圖示上方有一個白色長條。這就是為什麼我使用 bordertop 和 Verticalalign 來對齊圖示。
或您可以簡單地在 CSS 中執行此操作:
然後使用這樣的圖示:
更改圖示後檢查一切是否按您想要的方式工作,如果是,您可以將答案標記為正確:)