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 missin

Answer 1

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 2

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 3

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 4

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 5

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 6

Just type in css border none. The arrow is made from borders, if you remove the borders then there is no arrow. After you remove the border you can add your own icons.

.dropdown-toggle::after{
 border: none;
 content: '\icon';
}