4
  1. 我正在使用 CSS 内容属性，因为它的加载速度比标签快。
  2. “fa-user”图标类有两组图标，即“far”和“fas”，但它们共享相同的Unicode“\f007”。这是个问题。
  3. 获得的结果只有一个缺点。图标在页面加载几秒钟后加载。因此，它与用户体验相混淆。
  4. 使用标签加起来就是带注释的 HTML 标记。

"far"那么，有没有办法我仍然可以使用 CSS 内容属性并在和类之间切换"fas"？

有什么建议可以解决这个问题吗？

4

2 回答 2

5

图标的fas和之间的区别在于，要在两者之间切换，您只需调整：farfont-weightfont-weight

.icon {
    font-family:"Font Awesome\ 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.icon:before {
  content:"\f007";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<span class="icon" style="font-weight:300"></span>
<span class="icon" style="font-weight:900"></span>

这是另一个相关问题：Font Awesome 在 CSS 中直接使用时显示正方形而不是图标

于 2018-04-25T09:18:20.887 回答
0

Font Awesome 5 具有异步加载指示器，允许您在图标容器加载时将 css 添加到图标容器中，这样您就可以确保它们不会改变您的布局。

无需为此使用 css 解决方案。无论哪种方式，css 还必须加载外部资源，因此这也可能需要一段时间。

于 2018-04-25T09:08:30.280 回答