如何在 NativeScript <Button> 中使用字体图标

Question

尝试在<Button>.

例如：

<Button class="btn btn-primary fas" text="{{'fa-film' | fonticon}} Test"></Button>

CSS：

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

当使用Nativescript主题，它定义了font-family为.btn类。如您所知，iconfonts 也依赖于此font-family。

那么在上面的按钮中，如何将一个font-family应用于字符串 Test 而将另一个font-family应用于图标？

如果您使用 NativeScript Angular SASS 入门应用程序并在其中定义 .fas_app-common.scss并使用我上面的按钮，您将看到图标显示为 ?。这是因为.btn覆盖了font-family.

我可以通过为图标font-family提供更高的优先级来解决这个问题- 但这会阻止我为按钮上的文本字体设置样式。

按钮内字体图标的非原生脚本实现通过将元素（如<span>）作为子元素放置到<Button>. 示例在这里。

你怎么能用 NativeScript 做到这一点<Button>？

Answer 1

答案是使用FormattedString。它允许您将 aclass应用于每个元素。

前任：

<Button (tap)="onTap($event)" class="btn btn-primary">
    <FormattedString>
        <Span class="fas" text="{{'fa-film' | fonticon}}"></Span>
        <Span text=" Test" fontAttributes="Bold"></Span>            
    </FormattedString>
</Button>