css - 如何在选择中正确使用fontawesome

Question

我正在尝试在选择中显示 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>

Answer 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;
}

Answer 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

Answer 3

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

然后选项可能如下所示：

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