nativescript - 如何在 NativeScript 上添加自定义图标字体

Question

我正在尝试在我的 NativeScript 应用程序上使用图标字体。

所以我按照oficial documentation这些是我的步骤:

(1) - 将 ttf 文件下载到我的 app/fonts 文件夹中:

(2) - 在我的 app.css 上，我声明了字体全局类，如下所示:

.fa {
  font-family: "Font Awesome 5 Free", "fa-regular-400", "fa-solid- 
  900";
 }

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

(3) - 然后在我的 html 组件上:

<Label text="&#xf019;" class="far"></Label>

但我的图标没有出现在屏幕上。我将 NativeScript 6+ 与 Angular 8 结合使用。

有什么帮助吗？

Answer 1

我明白为什么字体图标没有显示了!

我使用的是 NativeScript 5.1，自从版本 6.0 发布后，我迁移了该项目:

tns 迁移

问题是我将 NS 与 Angular 8 一起使用，并根据 docs我必须将字体放在项目的根文件夹中。

In your root application folder (This is the app folder for NativeScript Core, and the src folder for Angular 6+), create a folder called fonts and place the .ttf there.

所以，显然问题是我的字体文件夹位于 /app 内，而它应该位于 /src 文件夹内。

我花了很长时间才意识到，由于某种奇怪的原因，我导入的文本字体(如“Montserrat.tff”)工作得很好。所以我认为这个问题与 NativeScript 或者其他什么有关。

简而言之，使用 NativeScript 和 Angular 6+ 的错误方法:

正确的方法:

我希望这对可能遇到同样问题/情况的新手有所帮助。