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>

You would have to build a custom control using JavaScript that includes an icon to mimic a select control — Davis, Feb 25 '18 at 02:27
very strange, I have tried on 3 devices without success, will it be some kind of encoding? — Pablogrind, Feb 25 '18 at 14:35
Possible duplicate of [font awesome icon in select option](https://stackoverflow.com/questions/36743041/font-awesome-icon-in-select-option) — Kaiser, Dec 07 '18 at 06:20

Jonathan Parent Lévesque · Answer 1 · 2018-06-21T16:48:20.230

3

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

edited Jun 21 '18 at 16:48

answered Jun 21 '18 at 16:36

Jonathan Parent Lévesque

1,902
1
25
35

@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. https://github.com/FortAwesome/Font-Awesome/issues – Jonathan Parent Lévesque Aug 21 '19 at 15:36

score 0 · Answer 2 · answered Jan 16 '19 at 21:13

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

score -1 · Answer 3 · answered Dec 06 '20 at 12:57

-1

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

answered Dec 06 '20 at 12:57

Brennan James

332
2
7

How to use correctly fontawesome in select

3 Answers3

Linked