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

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.