NativeScript FontAwesome 5免费版在iOS中使用纯字体覆盖常规字体

Question

尝试使用以下字体在Nativescript中使用FontAwesome 5显示用户图标，带有常规视图的用户图标已在Android中正确加载。

但是在iOS版本中，该图标会以纯字体覆盖。

<Label class="page-icon far" text="&#xf007;"></Label>

当我尝试从Fonts文件夹中删除纯字体时，它正在工作。

Answer 1

问题是Font Awesome对Solid和Regular集合使用了SAME Family名称。 .ttf文件根据Style区分集合，而CSS不支持。{p>

解决方案是重命名其中一个集合的Family-我选择为实体。

我写了一篇深入的blog post，但要旨是：

1. 将.ttf文件复制到您的fonts目录中
2. 使用fontname.py（或类似工具）重命名Family属性：

python fontname.py "Font Awesome 5 Free Solid" fa-solid-900.ttf

然后您可以在CSS中指定以下内容：

.far {
    font-family: 'Font Awesome 5 Free', fa-regular-400;
}

.fab {
    font-family: 'Font Awesome 5 Brands', fa-brands-400;
}

.fas {
    font-family: 'Font Awesome 5 Free Solid', fa-solid-900;
}

Answer 2

也许这会有所帮助？

https://medium.com/@fransyozef/how-i-got-fontawesome-5-working-with-my-angular-nativescript-mobile-app-d7605930d7c9

我在FontAwesome 5上也遇到了很多问题，已将其修复，因此决定在其中发布博客文章：）

Answer 3

Font Awesome 5在Android和ios中的nativescript Angular中添加 使用

.fa {
    font-family: "FontAwesome";
}

app.android.css app.ios.css 应用/字体 download