无法在 NativeScript 中使用字体图标

Question

我从 fontello 下载了一个 tff 图标 - 我将其重命名为 discard - 并将其放置在 vanilla ts nativescript 项目 app 文件夹内的 fonts 文件夹中：

在我的 xml 我有这个标签：

<Label id="label" text="1U+F1F8" class="discard" />

并且app.css像这样：

.btn {
    font-size: 18;
}

.discard {
    font-family: "discard";
    font-weight: bold;
}

标签在应该显示图标时显示文本？

文本是 unicode of the tff file which I believe is a requirement as seen in the docs - 从 Mac:

上的字体簿中获取

到目前为止，我也只尝试了 android - 因为我只需要正确设置文件名即可。

可能是什么问题？

我在我的原始项目中使用 react-nativescript - 但希望首先让它在 vanilla ts 中工作。最好有一种方法可以在 后面的代码 中实现，然后我可以在 react-nativescript 中使用它。

Answer 1

该应用将 Unicode 解释为文本，您需要将其设置为 Unicode 文字，如下所示：

<Label text="{{ trashGlyph }}" class="discard"/>

并在您的 ViewModel 中定义 trashGlyph：

trashGlyph = "\uf1f8"

或者，如果使用 Angular - 这应该可以完成工作：

<Label id="label" [text]="'\uf1f8'" class="discard" />

Answer 2

I am using react-nativescript in my original project - but looking to get it working in vanilla ts first. Preferably there is a way to do it in the code behind that I can then use in react-nativescript.

@anthares 显然已经涵盖了问题的 NativeScript Core 方面！

我将介绍 React NativeScript 的细节。

这是一个 sample repo（实际上是 React NativeScript 入门模板的 repo）展示了如何将字体集成到 React NativeScript 应用程序中（这可能与将字体集成到 NativeScript Core 应用程序中没有什么不同）。顺便说一句，我注意到您正在使用 CSS，该存储库还显示了如何设置 SCSS。

app/components/AppContainer.tsx 展示了如何在 React NativeScript 中使用字形图标：

<$Label row={0} col={0} className="info" horizontalAlignment="center" verticalAlignment="middle">
    <$FormattedString>
        <$Span className="fa" text="&#xf135;"/>
        <$Span text=" MESSAGE"/>
    </$FormattedString>
</$Label>

编辑：请注意，字形图标不必位于 FormattedString Span 内。它可以直接写成 <$Label text=""/>，也可能 <$Label></$Label> 取决于 JSX 的工作方式。

至少，这就是在 JSX 中将它写成 static 字符串的方法。但是，如果您将 text 属性写为 dynamic 字符串，即：

text={`Some dynamic string`}

... 然后你可能会发现转义规则可能不同（因为它应该遵循该上下文中常规 JS 语法的规则）。我猜它在那种情况下可能表现得像代码隐藏。

注意：也可能  不是在静态上下文中编写它的唯一方法。我只是碰巧从 NativeScript Vue 示例中复制并粘贴了它，它按原样工作，所以我接受了它。

无法在 NativeScript 中使用字体图标

Unable to use font icon in NativeScript

css

fonts

nativescript