在 Font Awesome 中是否可以使用 CSS 内容属性在 "far" 和 "fas" 数据前缀之间切换？

Question

我正在使用 CSS 内容属性，因为它加载速度比标签快。
"fa-user" 图标 class 有两组图标，即 "far" 和 "fas"，但它们共享相同的 Unicode "\f007"。这是一个问题。
得到的结果只有一个缺点。图标在页面加载后几秒钟加载。因此，它会扰乱用户体验。
使用标记加起来注释 HTML 标记。

So, is there a way I can still use CSS content attributes and switch between the "far" and "fas" classes?

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

Answer 1

Font Awesome 5 asynchronous loading indicators 允许您在图标容器加载时添加 css 以确保它们不会改变您的布局。

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

Answer 2

图标的 fas 和 far 之间的区别是 font-weight 所以要在两者之间切换，您只需调整 font-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 内容属性在 "far" 和 "fas" 数据前缀之间切换？

Is it possible in Font Awesome to switch between the "far" and "fas" data-prefix with the CSS content attribute?

html

css

font-awesome

font-awesome-5