代码之家 › 专栏 › 技术社区 › Muhammad Asif Mohtesham

在Font Awesome中,是否可以使用CSS内容属性在“far”和“fas”数据前缀之间切换?[副本]

font-awesome-5 font-awesome css html

4

Muhammad Asif Mohtesham · 技术社区 · 6 年前

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

那么,有没有一种方法可以继续使用CSS内容属性并在 "far" 和 "fas" 课程?

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

2 回复 | 直到 6 年前

1

5

Temani Afif 6 年前

之间的差异 fas 以及 far 图标的 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 shows square instead of icon when used directly in CSS

2

0

Jerodev 6 年前

字体Awesome 5有 asynchronous loading indicators 这允许您在图标容器加载时将css添加到图标容器中,以便确保它们不会改变您的布局。

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