Nativescript 在 NavigationButton 上使用自定义图标

Question

我正在尝试在 NativeScript Angular 应用程序的 ActionBar 上添加一个带有自定义字体的按钮。这是我到目前为止尝试过的：

<ActionBar class="cp-icon">
    <NavigationButton text="&#xE801;" (tap)="goBack()"></NavigationButton>
    <Image src="res://logo_h_white"></Image>
</ActionBar>

// Or one of these optio
<ActionItem text="&#xE801;" (tap)="goBack()"></ActionItem>
<Label text="&#xE801;"></Label>
<Button text="&#xE801;"></Button>

但其中 none 似乎有效。我确实安装了字体，因为我可以在视图中使用。另外，如果我只是将文本属性更改为字符串而不是图标，它也不会显示任何内容。

有办法吗？

Answer 1

你最好的选择是使用 nativescript-ngx-fonticon 插件：https://github.com/NathanWalker/nativescript-ngx-fonticon

通过检查这个 SO 答案来避免一些常见的陷阱：

Answer 2

方法是使用 icon.decode="font://" 和 class 图标字体。见下文；

<NavigationButton text="Wont Show" icon.decode="font://&#xE801;" class="fas" (tap)="goBack()"/>

Nativescript 在 NavigationButton 上使用自定义图标

Nativescript using custom icons on NavigationButton

angular

nativescript

nativescript-angular