如何使用带有Angular（5）的Nativescript（3.4.2）的Font Awesome（4.7）

时间：2018-03-24 05:37:25

标签： android font-awesome nativescript angular5

希望这是一个简单的问题，但现在让我感到难过。

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

enter image description here

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

  • ＆＃34; .ttf＆＃34;字体文件需要在＆＃34; ../ app / fonts /＆＃34;文件夹中。
  • 需要使用与字体文件名匹配的font-family创建css类。
  • css类需要应用于模板文件中的所需标记，text属性需要包含图标的unicode。
  • 大多数/所有教程都使用的是iOS而不是Android（我使用的是Android），而且他们使用的是.css而不是.scss文件。这与它有关吗？

尽管做了以上所有事情，但我还是无法解决这个问题。这是我正在尝试的设置：

enter image description here

enter image description here

enter image description here

同样的事情似乎只是一个普通的旧标签： enter image description here

enter image description here

2 个答案:

答案 0 :(得分：1)

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

唯一的区别是模板不使用-webfont而使用FontAwesome.ttf，而在相应的SCSS类中，字体使用其文件名引用 .fa { font-family: "FontAwesome" }

答案 1 :(得分：0)

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

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

相关问题
最新问题