如何在select中正确使用fontawesome [英] How to use correctly fontawesome in select

问题描述

我正试图在一个选择中显示字体惊人的图标，但是在下拉列表中，这些图标的预览效果不佳

I'm trying to show the fontawesome icons in a select, but in the drop-down list the icons are not previewed well

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

推荐答案

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

You don't need the FontAwesomeSelect class. Instead, use the default fa class.

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

请注意包含该类的内容:

Notice well what contains this class:

如果仍然无法正常运行，请尝试以下操作:

If it's still not working, try this:

.fa option {

    font-weight: 900;
}

这篇关于如何在select中正确使用fontawesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！