如何将 Font Awesome (4.7) 与 Nativescript (3.4.2) 与 Angular (5) 一起使用答案

【问题标题】：How do I use Font Awesome (4.7) with Nativescript (3.4.2) with Angular (5)如何将 Font Awesome (4.7) 与 Nativescript (3.4.2) 与 Angular (5) 一起使用
【发布时间】：2018-03-24 05:37:24
【问题描述】：

希望这是一个简单的问题，但此刻我被难住了。

我正在使用 Angular 5/TS 选项卡式模板为 Android 创建 Nativescript 应用程序，并尝试将 Font Awesome 图标集成到项目中。问题是，每个图标都显示为看似信封/占位符，而不是实际图标。有什么我缺少的东西需要在 Android 上运行吗？请参阅下面的屏幕截图。

以下是我从各种在线教程和指南中收集到的内容：

“.ttf”字体文件需要位于“../app/fonts/”文件夹中。
需要使用与字体文件名匹配的字体系列来创建 css 类。
需要将css类应用于模板文件中所需的标签，并且text属性需要包含图标的unicode。
大多数/所有教程都使用 iOS 而不是 Android（我使用的是 Android），并且他们使用 .css 而不是 .scss 文件。跟这有关系吗？

尽管执行了上述所有操作，但我无法使其正常工作。这是我正在尝试的设置：

同样的事情似乎发生在一个普通的旧标签上：

【问题讨论】：

标签： android font-awesome nativescript angular5

【解决方案1】：

使用标准的FontAwesome.ttf 而不是网络字体变体。使用 SCSS 代替 CSS 不会改变任何东西 - this NativeScreipt template 实际上是用 SCSS 实现 FontAwesome。

唯一的区别是模板使用的不是-webfont，而是FontAwesome.ttf，并且在各自的SCSS类中，字体用它的文件名来引用 .fa { font-family: "FontAwesome" }

【讨论】：

谢谢尼克，我会在今天晚些时候试一试并回复。

【解决方案2】：

试试这个插件，它有助于使用任何/多个字体图标。

https://github.com/NathanWalker/nativescript-ngx-fonticon

【讨论】：

感谢 Manoj，我已经尝试过这个插件（包括他们的说明）但没有成功。
至少我可以确认我正在使用该插件成功地使用字体真棒和图标月亮字体。