Font awesome Unicode icon is not shown in dropdown list

Question

I have a dropdown to choose Male or Female. I want to show male or female icon beside the each option. I would like to use font awesome 5. To show icon I have used the Unicode of male and female icon from font awesome site. But the unicode is not showing. I have taken help from this link

HTML Code:

<select class="form-control" id="gender" name="gender">
     <option value="" selected>Select Gender</option>
     <option value="">Male &#xf183;</option>
     <option value="">Female &#xf182;</option>
</select>

CSS Code:

select {
    font-family: 'Font Awesome\ 5 Brands' , 'arial'
  }

I have already added the font awesome CSS CDN.

It works for github icon but does not works for Male or Female icon.

Answer 1

I have a similar problem before, trying to add-in class in each option the corresponding class of icon

<select class="form-control" id="gender" name="gender">
     <option value="" selected>Select Gender</option>
     <option class="fas fa-male"   value="male">Male &#xf183;</option>
     <option class="fas fa-female" value="female">Female &#xf182;</option>
</select>

Answer 2

do you add cdn in your code? try this code.

 select { font-family: 'Font Awesome\ 5 Brands', 'arial' }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <select> <option selected value="fa fa-github">Github &#xf09b;</option> </select> <i class="fab fa-github"> </i>