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>

要测试的外部网址：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;

＆＃13;

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

＆＃13;

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

＆＃13;

CSS内容中的字体很棒，无法在移动设备上呈现

2 个答案: