Font Awesome 5：某些 unicode 不会显示在 html 选择中答案

【问题标题】：Font Awesome 5: some unicode won't display in html selectFont Awesome 5：某些 unicode 不会显示在 html 选择中
【发布时间】：2020-01-21 14:20:32
【问题描述】：

我有一个包含 2 个项目的 html 选择，每个项目都应该显示一个 FA 图标，但只有一个项目有效。两个图标都只有“已售”版本可用 FA5 免费。将字体系列更改为“Font Awesome 5 Free”，没有帮助，然后没有显示任何图标。

<html>

<head></head>

<body>

  <style>
    select {
      font-family: 'FontAwesome';
    }
  </style>
  <select style='font-weight: 900;'>
    <option>&#xf19d; Broke</option>
    <option>&#xf009; Working</option>
  </select>

  <br/><br/> Code valid as this shows <i class='fas'>&#xf19d;</i><br/><br/> But displayed icons have the solid style as free and the other styles are pro only<br /> https://fontawesome.com/icons/graduation-cap?style=solid f19d<br /> https://fontawesome.com/icons/th-large?style=solid
  f009<br />


  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/js/all.js" crossorigin="anonymous"></script>


</body>

</html>

提前致谢

【问题讨论】：

标签： html css font-awesome-5

【解决方案1】：

您正在使用 JS+SVG 方法加载您的图标，因此内容中使用的图标 <i class='fas'>&#xf19d;</i> 将被转换为 SVG。选择中的 unicde 不被考虑在内，它将依赖于旧版本的 font-family: 'FontAwesome'，并且您尝试显示的第一个图标仅存在于 V5 中（与第二个不同）。

要解决您的问题，您需要加载 CSS 版本并更正 font-family

select {
  font-family: 'Font Awesome 5 Free';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0-1/css/all.css">

<select style='font-weight: 900;'>
  <option>&#xf19d; Broke</option>
  <option>&#xf009; Working</option>
</select>

<br/><br/> Code valid as this shows <i class='fas'>&#xf19d;</i><br/><br/> But displayed icons have the solid style as free and the other styles are pro only<br /> https://fontawesome.com/icons/graduation-cap?style=solid f19d<br /> https://fontawesome.com/icons/th-large?style=solid
f009
<br />

【讨论】：

不错！谢谢！