时间戳

首页 > 解决方案 > Font Awesome 5：某些 unicode 不会在 html 选择中显示

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

问题描述

我有一个包含 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>

提前致谢

标签： htmlcssfont-awesome-5

解决方案

您正在使用 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 />

推荐阅读