如何在 nativescript 上添加自定义图标字体答案

【问题标题】：how to add custom Icons fonts on nativescript如何在 nativescript 上添加自定义图标字体
【发布时间】：2019-07-23 19:33:26
【问题描述】：

我正在尝试在我的 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。

有什么帮助吗？

【问题讨论】：

是错字吗？您的班级名称为far，但您的班级定义为fa / fa-solid。
正如 Manoj 提到的类名应该是 fa

标签： nativescript angular2-nativescript nativescript-angular

【解决方案1】：

我知道为什么字体图标没有出现！

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

tns migrate

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

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

所以，很明显问题是我的字体文件夹在 /app 内，而它应该在 /src 文件夹内。

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

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

正确的方法：

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

【讨论】：