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!

Solution 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.

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

Solution 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.

Solution 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.

Solution 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;
}

View more solutions

Comments

[Retros]

That's it! Thank you, ZimSystem.

[astralmaster]

display:none is a better solution since if you remove dropdown-toggle class then nested dropdowns (dropdown inside dropdown) won't work.

[Karthikeyan Vellingiri]

Working !! Thanks Zim !!

[Leandro Bardelli]

plus for 2nd solution

[Leslie Nyahwa]

How do I override the default one with another?