CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Retros
Retros

Reputation: 3611

Adding Font Awesome icon to Bootstrap 4 select

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!

Upvotes: 4

Views: 13806

Answers (2)

krizajb
krizajb

Reputation: 1814

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();

Upvotes: 4

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 1

Related Questions