Changing Dropdown Icon on Bootstrap 4

Question

On Bootstrap 3 this was pretty easy, you just had to change span and add whatever icon you wanted instead. But that doesn't seem the case with Bootstrap 4. Or maybe I'm missing something?

Anyway, here's the basic code for it:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </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>

Can someone please tell me if it's possible to change the dropdown icon on this and how? I want to add one from fontawesome.

Thank you!

Answer 1

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>

http://codeply.com/go/xd2b75iUbM

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

Answer 2

The default caret isn't an icon, rather a border with these properties:

border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;

Thus if you set .dropdown-toggle::after to have border:none!important, you can the use content to set the icon you want.

The code I use is this:

.dropdown-toggle::after {
  border: none!important;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f107"!important; /* the desired FontAwesome icon */
  vertical-align: 0; /* to center vertically */
}

With this method you can also change the FontAwesome icon when the dropdown is visible, thanks to the .show class it adds:

li.menu-item.show a.dropdown-toggle.::after {
  content: "\f106"!important /* the different icon */
}

Answer 3

I've done something similar to the accepted answer, changing the default caret to a vertical ellipsis from font-awesome like this:

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

.dropdown-toggle-ellipsis::before {
  display: inline-block;
  padding: 0.5rem;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f142";
}

Just apply dropdown-toggle-ellipsis as an additional class to your toggle button.

The main difference with this solution is that the actual icon (\f142 here) is now defined in your stylesheets, not in your markup. Whether that's a plus depends on your situation of course.

Answer 4

A solution that allows to keep the HTML as it is and simply adding one CSS rule:

.dropdown-toggle::after {
  border: none;
  font: normal normal normal 12px/1 'Font Awesome 5 Free';
  content: "\f078";
  vertical-align: 0;
}

This will work with Font Awesome 5. The content property can be set to any available Unicode values. For example for the chevron-down (https://fontawesome.com/icons/chevron-down?style=solid) it's f078.

Answer 5

Using the suggestions in the other answers, I added rules in my app's main CSS file for the the dropdown-toggle.

The key is that Bootstrap adds the "collapsed" class to items with "dropdown-toggle" when the content is hidden and removes the class when the content is displayed.

/* Align Bootstrap default Dropdown icon closer to vertical center of collapsed icon. */
.dropdown-toggle::after {
    vertical-align: 0.15em;
}

/* Make Dropdown icon point right when collapsed, with Browser default vertical alignment. */
.collapsed.dropdown-toggle::after {
    border-top: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-bottom: 0.3em solid transparent;
    border-right: 0;
    vertical-align: unset;
}

Answer 6

In case anyone else arrives via a google search for how to insert the dropdown icon, here's a nice way:

<span style="color:black;" class="fa fa-caret-down pl-1"></span>

This uses font awesome 5, and the pl-1 adds a little padding to the left of the dropdown icon so it's more nicely spaced.

The result is an icon very similar to that found on GitHub: