Changing Dropdown Icon on Bootstrap

Question

Bootstrap 5 (update 2023)

Changing the dropdown caret to an icon still works the same way in Bootstrap 5. Don’t forget to change the data-toggle to data-bs-toggle:

<div class="dropdown">
  <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-heart"></i>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

https://codeply.com/p/oG5SpGwWfL

Bootstrap 4 (original answer)

You have to hide the caret icon like this..

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

Then add the fontawesome icon..

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-heart"></i>
</button>

https://codeply.com/p/BV8WjfEPzb

OR, just remove the dropdown-toggle class from the button as it’s only purpose seems to be showing the caret icon.

Leave a Comment Cancel reply