在 NativeScript SegmentedBar 标题中使用字体真棒图标答案

【问题标题】：Using font awesome icons in a NativeScript SegmentedBar Title在 NativeScript SegmentedBar 标题中使用字体真棒图标
【发布时间】：2017-01-27 14:00:27
【问题描述】：

对于我们的 NativeScript Angular2 应用，我们需要底部对齐的标签。我们正在尝试通过 SegmentedBar 来实现这一点（因为我理解 tabviews 在 NativeScript-Angular2 应用程序中不能底部对齐）。如何在分段栏标题中实现字体真棒图标？我尝试将此 unicode 保存在 items 数组中，然后在 html 中分配一个很棒的字体类，但这不起作用。还有其他选择吗？

我的代码在下面——segmentedbar.ts：

import { Component, ChangeDetectionStrategy } from "@angular/core";
import { SegmentedBarItem } from "ui/segmented-bar";

@Component({
moduleId: module.id,
selector: "maintab",
templateUrl: "./maintab.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MainTabComponent {
public myItems: Array;
public prop = "Item " + 0;

constructor() {
    this.myItems = [];
    for (let i = 1; i < 5; i++) {
        let tmpSegmentedBar: SegmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
        tmpSegmentedBar.title = "Tab " + i;

        this.myItems.push(tmpSegmentedBar);
    }
}

这是我的 segmentedbar.html

<StackLayout>
    <StackLayout>
        <!-- >> segmentedbar-basic-html -->
        <Label [text]="prop" textWrap="true" vertical-align="center" class="h2 p-15 text-center"></Label>
        <SegmentedBar class="m-5" #sb [items]="myItems" selectedIndex="0" (selectedIndexChange)="prop='Item '+ sb.selectedIndex"></SegmentedBar><!-- << segmentedbar-basic-html -->
    </StackLayout>
</StackLayout>

【问题讨论】：

为什么不在 HTML 模板中包含图标？ <i class="fa fa-laptop"></i>

标签： font-awesome angular2-nativescript nativescript-telerik-ui

【解决方案1】：

您可以轻松使用字体超棒的图标 -

1- 创建一个命名字体的文件夹，并在其中保存 fontawesome-webfront.ttf 文件。您可以从 fontawesome 网站下载。

2- 创建一个类似这样的 css 类，其名称与您保存在字体文件夹中的名称相同

.font-awesome {
 font-family: "fontawesome-webfont";
 font-size: 14;
 font-weight: normal;
 text-align: center;
 font-style: normal;
}

3-现在在任何你想要的地方使用它，只要提到类作为字体真棒

<Button class="font-awesome" id="add"  [text]='"&#xf156;"'(tap)="anyTapEvent()">

【讨论】：