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类defines .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>完成此操作？

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

如何在NativeScript <button>中使用fonticon

1 个答案: