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

Question

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

但在 iOS 版本中，图标被 Solid 字体覆盖。

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

当我尝试从 Fonts 文件夹中删除纯色字体时，它起作用了。

Answer 1

也许这有帮助？

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

我在使用 FontAwesome 5 时也遇到了很多问题，修复了它，所以决定用它写一篇博客 post :)

Answer 2

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

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

app.android.css app.ios.css app/fonts download

Answer 3

问题是 Font Awesome 对 Solid 和 Regular 集合使用相同的 Family 名称。 .ttf 文件根据 Style 区分集合，这在 CSS.

中不受支持

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

我写了一个深入的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;
}