字体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'
  }

我已经添加了font awesome CSS CDN。

它可以正常显示Github图标，但无法正常显示男性或女性图标。

- mnu-nasir

---

你能在问题中添加一小段代码吗？ - Sagar V

那个反斜杠是故意的吗？ - MC Emperor

我不知道。我从附加的链接中复制了它。 - mnu-nasir

Answer 1

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

<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

Answer 2

你在代码中添加了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>

- Subhojit

---

我已经在我的页面中添加了CSS链接。 <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css'> - mnu-nasir

它适用于 GitHub 图标，但不适用于男性和女性图标。 - mnu-nasir