css - 将 Font Awesome 图标添加到 Bootstrap 4 选择

Question

我要添加this icon到一个简单的 Bootstrap 4 选择。所以它看起来更像是一个下拉菜单。我该怎么做？

到目前为止，这是我的代码:

.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>

由于某种原因，该代码段没有像我的编辑器那样显示更改。所以在这里，把它放在 codepen 里版也。无论如何，我也试过像这样添加它，但它不起作用:

.custom-select:after {
  content: "\f107";
  font-family: FontAwesome;
}

有人能帮帮我吗？谢谢!

Answer 1

这可能就是您正在寻找的 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();