首页 文章

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

提问于
浏览 次
1

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

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

enter image description here

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

  • ".ttf"字体文件需要位于"../app/fonts/"文件夹中 .

  • 需要使用与字体文件名匹配的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

android font-awesome nativescript angular5

2 回答

  • 0

    使用标准 FontAwesome.ttf 而不是Web字体变体 . 使用SCSS而不是CSS不会改变任何东西 - 事实上，this NativeScreipt template正在用SCSS实现 FontAwesome .

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

    回复于
  • 1

    试试这个有助于使用任何/多个字体图标的插件 .

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

    回复于

相关问题