如何在选择中正确使用 fontawesome

Question

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>

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

Answer 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

Answer 3

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

Then the options can look like this:

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