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

Question

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

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

插件nativescript-fontwo敬畏不包含在上的预览应用程序中device[device-id]，将无法工作。

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

mycomponent.component.html

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

app.css

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

此外，我在应用程序/字体文件夹中有以下文件：

fontawesome-webfont.ttf

那么，怎么了？

谢谢

Answer 1

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

• 下载FontAwesome字体https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself从"；下载Font Awesome Free for the Web"；盒

• 将*.ttf文件保存在src/fonts:中

  • fa-规则-400.ttf
  • fa-品牌-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>