How to use correctly fontawesome in select

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>

Solution

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

Comments

[Temani Afif]

did you notice that it's working here ?

[Pablogrind]

I have tried and working in Edge but not working in Chrome

[Davis]

You would have to build a custom control using JavaScript that includes an icon to mimic a select control

[Temani Afif]

no it's working fine with chrome for me

[Pablogrind]

very strange, I have tried on 3 devices without success, will it be some kind of encoding?

[Kaiser]

Possible duplicate of font awesome icon in select option

[Jonathan Parent Lévesque]

@Cris There are some known issues with IOS and OSX. You might want to check existing issues and create a new ticket if none solves your problem. github.com/FortAwesome/Font-Awesome/issues