NativeScript + Angular：如何安装和使用图标？

Question

我正在尝试在我的nativescript + angular应用程序中为iOS和Android使用图标。我尝试了不同的设置图标的方法，包括使用tutorial、solution以及material plugin和nativescript-ngx-fonticon。但是所有这些方法都给了我以下错误：

插件nativescript-fontawesome未包含在设备[device-id]的预览应用程序中，因此无法工作。

现在，这是我的当前代码：

mycomponent.component.html

<Button text="&#xf810" class="fa" column="0"></Button>

这是一个按钮的HTML代码，其中text属性存储了Unicode编码“”，class属性为“fa”，column属性为“0”。

app.css

.fa {
    font-family: 'FontAwesome', fontawesome-webfont;
 }

此外，我在我的app/fonts文件夹中有以下文件：

fontawesome-webfont.ttf

那么，有什么问题吗？

谢谢你

- Silvia

---

我认为你在材料图标和Awesome字体图标之间混淆了。 - Fmerco

https://dev59.com/SJ7ha4cB1Zd3GeqPk4yQ#41861624 - alexander.sivak

@alexander.sivak，我已经按照你发给我的链接操作了，但它无法使用。 - Silvia

@Fmerco 不，我没有困惑... 我尝试了FontAwesome和Material Icons的两种解决方案... 问题依旧。 - Silvia

@Silvia，您提供的示例与错误不一致。 - Fmerco

Answer 1

不再需要插件。NativeScript支持图标字体。 https://v7.docs.nativescript.org/angular/ui/ng-components/icon-fonts

• 从“下载Font Awesome Free for the Web”框中，下载Web用的FontAwesome字体https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself。

• 将*.ttf文件保存在src/fonts目录下：

  • fa-regular-400.ttf
  • fa-brands-400.ttf
  • fa-solid-900.ttf

• 在app.css中添加以下行：

.far {
    font-family: Font Awesome 5 Free, fa-regular-400;
    font-weight: 400;
}

.fab {
    font-family: Font Awesome 5 Brands, fa-brands-400;
    font-weight: 400;
}

.fas {
    font-family: Font Awesome 5 Free, fa-solid-900;
    font-weight: 900;
}

• 现在你可以使用

<!-- Using fa-solid-900.ttf -->
<Button text="&#xf810;" class="fas"></Button>

- Jan Willem Keizer