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>

回答1:

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>

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

回答2:

using the previous example i did this

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

And add this custom css

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

working with font awesome 5.6.3

来源：https://stackoverflow.com/questions/48968813/how-to-use-correctly-fontawesome-in-select