Nativescript-vue字体图标-图片标签

Question

我已从 nativescript 核心文档中阅读了以下代码。

<Image src="font://&#xf51e;" stretch="none" class="fas"></Image>

我想使用 Image 标签来显示图标，但是当我使用 NATIVESCRIPT-VUE 尝试之前的代码时，没有任何显示。

我的代码如下：

<Label text="hola" textWrap="true" />
<Label class="fas" style="font-size: 50em; color: red" text.decode="&#xf7aa;" />
<Label class="fas" style="font-size: 50em; color: blue" text.decode="&#xf51e;" />
<Label class="far" style="font-size: 50em; color: orange" text.decode="&#xf2bb;" />
<Label class="fab" style="font-size: 50em; color: black" text.decode="&#xf2b3;" />
<Image src="font://&#xf51e;" stretch="none" class="fas"></Image>

带有label标签的图标，完美。但是，带有图标的图像标签不起作用。

文档 Link：Here

这是我的项目结构

游乐场示例：Link

Answer 1

您缺少 fas

的 CSS 定义

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

有效！

<Label class="fas" style="font-size: 50em; color: red"
                text.decode="&#xf7aa;" />
<Image src.decode="font://&#xf7aa;" stretch="none"
                class="fas">

Updated Playground

Nativescript-vue字体图标-图片标签

Nativescript-vue Font Icon - Image Tag

nativescript

nativescript-vue