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

Question

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

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

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

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

mycomponent.component.html

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

应用程序.css

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

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

fontawesome-webfont.ttf

那么，怎么了？

谢谢

标签： angularnativescriptangular2-nativescriptnativescript-angularnativescript-plugin

Answer 1

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

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

• 将 *.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>