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

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.