CSS 内容中的 Font Awesome 未在移动设备上呈现

Question

这是将 Font Awesome 集成为 CSS 内容伪元素的基本示例：

ul {
  list-style: none;
}
li:before {
  content: '\f105';
  font-family: 'FontAwesome';
  margin-right: 1rem;
}

<ul>
  <li>Item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ul>

要测试的外部 URL：https://jsfiddle.net/1zknmxLg/2/

一切都像以前版本的 Font Awesome 一样工作，但是这个版本不会在任何手机上渲染图标（在 iPhone 7 和最新的 Android 上测试）。这是为什么？

Answer 1

翻阅文档后，正确的用法是：

li:after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

如果您使用付费（专业）版本，请将免费替换为专业（或品牌）。

font-weight: 900;

代表实心图标。

Answer 2

试试这个

font-family: Font Awesome\ 5 Free;

ul {
  list-style: none;
}
li:before {
  content: "\f105";
  font-family: Font Awesome\ 5 Free;
  margin-right: 1rem;
}
li {
	font-weight: 900;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<ul>
  <li>Item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ul>