3

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.

mnu-nasir
  • 1,642
  • 5
  • 30
  • 62

2 Answers2

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>
polk
  • 36
  • 5
0

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>
Subhojit
  • 1