Font awesome Unicode icon is not shown in dropdown list

HTML & CSS
1

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.

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.

2

Have you also tried copy/paste the actual characters as text copied from the Unicode map instead of Unicode entities?

The characters male + female pasted as text:
 + 

3

Try to sign up for font awesome five and put the specified kit code tag that they give you into your head and then use these.

<!--female-->
<i class='fas fa-female'></i>

<!--male-->
<i class='fas fa-male'></i>

Completed code

HTML

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

CSS

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

I search the CSS CDN you linked to for a reference of this text, but no font family was found. Brands usually indicates facebook,twitter, etc. Actual company brands. Did you mean Font Awesome 5 Brands or even Font Awesome 5 Free ?

5

Yes, font awesome 5 brands

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.