如何在选择中正确使用fontawesome答案

【问题标题】：How to use correctly fontawesome in select如何在选择中正确使用fontawesome
【发布时间】：2018-02-24 23:47:43
【问题描述】：

我正在尝试在选择中显示 fontawesome 图标，但在下拉列表中，图标没有很好地预览

.FontAwesomeSelect {
    font-family: Font Awesome\ 5 Free;
    font-size: 18px;
}

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/>

<select name="sample" id="sample" class="FontAwesomeSelect">
		<option value="">----</option>
		<option value="fa fa-address-card">&#xf2bb;</option>
		<option value="fa fa-bell">&#xf0f3;</option>
		<option value="fa fa-bookmark">&#xf02e;</option>
		<option value="fa fa-building">&#xf1ad;</option>
</select>

【问题讨论】：

你注意到它在这里工作了吗？
我已经尝试在 Edge 中工作，但在 Chrome 中无法工作
您必须使用 JavaScript 构建一个自定义控件，其中包含一个图标来模仿选择控件
不，Chrome 对我来说可以正常工作
很奇怪，我在3台设备上试了都没有成功，会不会是某种编码？

标签： css font-awesome font-awesome-5

【解决方案1】：

您不需要 FontAwesomeSelect 类。而是使用默认的 fa 类。

<select name="sample" id="sample" class="fa">
        <option value="">----</option>
        <option value="fa fa-address-card">&#xf2bb;</option>
        <option value="fa fa-bell">&#xf0f3;</option>
        <option value="fa fa-bookmark">&#xf02e;</option>
        <option value="fa fa-building">&#xf1ad;</option>
</select>

小提琴：https://jsfiddle.net/JonathanParentLevesque/uwe8azo7/4/

注意包含这个类的内容：

如果还是不行，试试这个：

.fa option {

    font-weight: 900;
}

【讨论】：

@Cris IOS 和 OSX 存在一些已知问题。如果没有解决您的问题，您可能需要检查现有问题并创建新票证。 github.com/FortAwesome/Font-Awesome/issues

【解决方案2】：

使用前面的例子我做了这个

<select name="sample" id="sample" class="fa">
    <option value="">----</option>
    <option value="fa fa-address-card">&#xf2bb;</option>
    <option value="fa fa-bell">&#xf0f3;</option>
    <option value="fa fa-bookmark">&#xf02e;</option>
    <option value="fa fa-building">&#xf1ad;</option>

并添加此自定义 css

select.form-control.fa option{ font-weight: 900; }

使用 font awesome 5.6.3

【讨论】：

【解决方案3】：

<style>
    .fa option {
    font-weight: 900;
    }
</style>

那么选项可以如下所示：

<option class="fa" value="select_value">&#xf0f3; Name Of Select</option>

【讨论】：