How to replace Bootstrap dropdown-toggle icon with another default icon?
As described in this other SO thread, you can either just remove the current icon and use a <span> or <i> tag to add your own custom/Font Awesome icon like this:
.dropdown-toggle::after {
display: none !important;
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" style="background-color: #7c2a8b;">
Customer
<i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>Or you can skip the css part and just remove the dropdown-toggle class name and add the icon to your html like this:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dropdown">
<button type="button" class="btn btn-secondary" data-toggle="dropdown" style="background-color: #7c2a8b;">
Customer
<i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>You might change the default values to the following:
.dropdown-toggle {
font: 400 1.5rem/1.25 sans-serif;
color: white;
background: purple;
padding: .5em 1em;
}
.dropdown-toggle::after {
display: inline-block;
width: .3em;
height: .3em;
margin: -.3em 0 0 .4em;
vertical-align: middle;
content: "";
border: .3em solid;
border-width: 0 .15em .15em 0;
transform: rotateZ(45deg)
}<span class="dropdown-toggle">CUSTOMERS</span>