将 Font Awesome 图标添加到 Bootstrap 4 选择答案

【问题标题】：Adding Font Awesome icon to Bootstrap 4 select将 Font Awesome 图标添加到 Bootstrap 4 选择
【发布时间】：2018-10-21 16:13:44
【问题描述】：

我想将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>

由于某种原因，sn-p 没有像我的编辑器那样显示更改。所以在这里，也有codepen 版本。无论如何，我也尝试过像这样添加它，但它不起作用：

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

有人可以帮帮我吗？谢谢！

【问题讨论】：

如果是图标，为什么样式是content: "\25AE";而不是content: "\f107 ";？
像这样：jsfiddle.net/m5ucsneo/1
@AlonEitan 内容错误，抱歉。不过没关系，只要能用，我可以改内容图标。
@MinarMnr 我不明白？字体真棒图标去哪里了？
我知道您更喜欢 Font Awesome 解决方案，但鉴于 .custom-select 通过 background-image 创建此图标，您是否考虑过类似的方法？使用伪类似乎并不能解决问题，我认为是因为 Bootstrap 处理自定义的方式。

标签： css twitter-bootstrap bootstrap-4

【解决方案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();

【讨论】：

【解决方案2】：

作为explained here，不可能设置 HTML 选择元素的样式，包括使用伪 :after 和 :before。

【讨论】：