Why can't I change a dropdown icon? - html

Question

I can't change my dropdown icon from the default "carrot" to a Fontawesome one.
I have read other questions, and yet none will work 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;
}
My dropdown should show this fontawesome icon: https://fontawesome.com/icons/angle-down?style=solid

Answer 1

You can't use ::after with select. I had the same problem as you. The best way to do it is with a CSS background image to customise the arrow. Such as:
select {
background-color: white;
background-image: url('../Images/Generic/arrowDownBlack.png');
background-repeat: no-repeat;
background-position: right 5px center;
background-size: 20px 20px;
}
select::-ms-expand {
display: none; //This gets rid of the arrow in IE.
}
If you use a vector image it will be just as good as font awesome.
To prove that I'm right you could always try adding the ::after to another element. It will show up, just not with select.