html - Font awesome Unicode 图标未显示在下拉列表中

Question

我有一个下拉菜单可以选择男性或女性。我想在每个选项旁边显示男性或女性图标。我想使用 font awesome 5。为了显示图标，我使用了来自 font awesome 网站的男性和女性图标的 Unicode。但是没有显示unicode。我从这link中得到了帮助

HTML 代码:

<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 代码:

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

我已经添加了很棒的字体CSS CDN.

它适用于 github 图标，但不适用于男性或女性图标。

Answer 1

我之前也遇到过类似的问题，尝试在每个选项中添加class对应的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>