Changing Dropdown Icon to Bootstrap 4
In Bootstrap 3 it was pretty simple, you just had to change the range and add the desired icon. But it doesn't look like Bootstrap 4. Or maybe I am 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 is possible to change the dropdown icon on this and how? I want to add one from fontovesome.
Thank!
source to share
You need to hide the caret icon like this.
.dropdown-toggle::after {
display: none;
}
Then add the font-size 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://www.codeply.com/go/xd2b75iUbM
OR , just remove the class dropdown-toggle
from the button as only the target seems to show the caret icon.
source to share
I did something similar to the accepted answer, changing the default setting to a vertical ellipse from the 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 and not in your markup. Whether your plus depends on your situation.
source to share