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

【问题标题】：How to use a fonticon inside a NativeScript <Button>如何在 NativeScript <Button> 中使用字体图标
【发布时间】：2019-06-11 20:51:06
【问题描述】：

我在尝试在 <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 主题时，defines font-family 用于 .btn 类。如您所知，iconfonts 也依赖于font-family。

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

如果您使用 NativeScript Angular SASS starter app 并在 _app-common.scss 中定义 .fas 并使用我上面的按钮，您会看到图标显示为 ?。这是因为.btn 覆盖了font-family。

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

按钮内字体图标的非本地脚本实现通过将元素（如<span>）作为子元素放入<Button> 来解决这个问题。示例here。

您如何使用 NativeScript <Button> 完成此任务？

【问题讨论】：

谢谢@marc_s，我犯了很多错误——太早了；）

标签： nativescript angular2-nativescript

【解决方案1】：

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

例如：

<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>

【讨论】：

fonticon 是什么？