Adding Font Awesome icon to Bootstrap 4 select

css twitter-bootstrap bootstrap-4

11,622

Solution 1

This might be what you are looking for bootstrap-select.

html:

<div class="container">
    <div class="row">
        <div class="col-4">
            <select id="mySelect" data-show-content="true" class="form-control">
                <option>Select..</option>
                <option data-content="<i class='fa fa-cutlery'></i> Cutlery"></option>
                <option data-content="<i class='fa fa-eye'></i> Eye"></option>
                <option data-content="<i class='fa fa-heart-o'></i> Heart"></option>
                <option data-content="<i class='fa fa-leaf'></i> Leaf"></option>
                <option data-content="<i class='fa fa-music'></i> Music"></option>
                <option data-content="<i class='fa fa-star'></i> Star"></option>
                <option data-content="<span class='badge badge-warning mt-1 ml-2 float-right'>3</span> More"></option>
            </select>
        </div>
    </div>
</div>

js:

$('#mySelect').selectpicker();

Solution 2

As explained here it's not possible to style a HTML select element, and that includes using pseudo :after and :before.

11,622

Retros

Updated on June 04, 2022

Comments

Retros almost 2 years
I want to add this icon to a simple Bootstrap 4 select. So it looks more like a dropdown. How can I do this?

This is my code so far:
```
.custom-select {
  background-color: #009CFF;
  color: #fff;
  text-transform: uppercase;
  background-image: none;
}
```
```
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div>
  <select class="custom-select rounded-0 border-0">
    <option selected>Select</option>
    <i class="fa fa-angle-down" aria-hidden="true"></i>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
```
The snippet is for some reason not showing changes as my editor is. So here, have it in codepen version too. Anyway, I've tried adding it in like this, too, but it's not working:
```
.custom-select:after {
  content: "\f107";
  font-family: FontAwesome;
}
```
Can someone help me out? Thanks!
- Alon Eitan almost 7 years
  
  If that is the icon, why the style is content: "\25AE"; and not content: "\f107 ";?
- Minar Mnr almost 7 years
  
  like this : jsfiddle.net/m5ucsneo/1
- Retros almost 7 years
  
  @AlonEitan Wrong content, sorry. But it doesn't really matter, as long as it works, I can change the content icon.
- Retros almost 7 years
  
  @MinarMnr I don't understand? Where does the font awesome icon go?
- Robert almost 7 years
  
  I know you prefer a Font Awesome solution, but given that .custom-select creates this icon via background-image have you considered a similar approach? Using pseudo classes doesn't seem to solve the issue, I assume because of how Bootstrap handles the customizations.
- Yadhu Babu almost 7 years
  
  Possible duplicate of I want to change the select icon/dropdown icon to (fa-chevron-down). How can I?
- Yadhu Babu almost 7 years
  
  check this [link]stackoverflow.com/questions/30646923/…
- Retros almost 7 years
  
  @RobertC That's a good idea, actually! Thank you! Let's see if I can style it properly. Lol!