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

Question

我正在尝试在适用于 iOS 和 Android 的NativeScript + Angular应用程序上使用图标。我尝试了不同的方式来设置图标，我使用了本教程，这个解决方案，我什至尝试使用材质插件和nativescript-ngx-fonticon。

所有这些方法都会给我这个错误：

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

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

我的组件.组件.html

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

应用程序.css

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

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

fontawesome-webfont.ttf

那么，出了什么问题呢？

谢谢

Answer 1

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

• 从“下载免费网页版 Font Awesome”框中下载网页版 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>