How to change dropdown icon in Bootstrap 5?

Question

I need to change the default icon shown in Bootstrap 5 dropdown menu to a Font Awesome character.

I have read the documentation but nothing is of use. I've tried rewriting the CSS with no success.

How to change the drop-down icon in Bootstrap 5?

Answer 1

Okay, I assume you already have the link rel="stylesheet" in your html header. This is the latest version you should use, but I tried using an older version and that worked too:

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

Then I grabbed the Bootstrap 5 dropdown and added a custom-dropdown class:

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

Then create the following content in the css file:

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

I've never used font Awesome before, but without border-top 0 I see a white bar above the icon. That's why I use bordertop and Verticalalign to align the icons.

Or you can simply do this in CSS:

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

Then use an icon like this:

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

After changing the icon check if everything works the way you want, if so you can mark your answer as correct :)