如何在本机脚本上添加自定义图标字体

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>

但是我的图标未出现在屏幕上。我在Angular 8中使用NativeScript 6 +。

有帮助吗？

Answer 1

我弄清楚了为什么没有显示字体图标！

我使用的是NativeScript 5.1，并且自6.0版发布以来，我迁移了该项目：

tns migrate

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

  

在您的根应用程序文件夹（这是NativeScript Core的应用程序文件夹，以及Angular 6+的src文件夹）中，创建一个名为fonts的文件夹，并将.ttf放在此处。

因此，很明显，问题在于我的字体文件夹应该位于/app文件夹中，而位于/src内。

我花了很长时间才意识到，由于某种奇怪的原因，我导入的文本字体（如“ Montserrat.tff”）可以正常工作。所以我认为问题与NativeScript或其他有关。

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

正确的方法：

我希望这对可能陷入同一问题/情况的新移民有所帮助。