I've been struggling to change my dropdown icon from the default "carrot" to a Fontawesome one. Despite researching other questions, I still can't find a solution that works for me.
<form>
<div class="form-group">
<select disabled class="custom-select">
<option selected>Región Metropolitana</option>
</select>
</div>
<div class="form-group">
<select class="custom-select">
<option selected>Comuna</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</form>
.form-group .custom-select:disabled {
background: none;
}
.form-group .custom-select::after {
content: '\f107';
font-family: "Font Awesome\ 5 Free";
font-size: 1em;
font-weight: bold;
pointer-events: none;
position: absolute;
left: auto;
top: 50px;
z-index: 9;
color: red;
}
The icon I want my dropdown to display is this Fontawesome one: https://fontawesome.com/icons/angle-down?style=solid