Question

我试图在选择中显示fontawesome图标，但在下拉列表中图标未预览好

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用超赞的字体5.6.3

Answer 3

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

然后这些选项如下所示：

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

如何在select中正确使用fontawesome

3 个答案: