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 */
}