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

Question

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

中得到了帮助

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

你在代码中添加了 cdn 吗？试试这个代码。

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>

Answer 2

我之前也遇到过类似的问题，尝试在每个选项中添加class图标

对应的class

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

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

Font awesome Unicode icon is not shown in dropdown list

html

font-awesome