angular - 在 NativeScript 视图中动态渲染 FontAwesome 图标

Question

如果我尝试在 NativeScript 视图中呈现硬编码的 FontAwesome 图标，如下所示：

<Label class="fas" text="&#xf015;"></Label>

...然后它正确显示。但是，如果我尝试通过使用 text="{{ item.faIcon }}" 或 [text]="item.faIcon" 来呈现动态生成的 FontAwesome 图标，如下所示：

private buildMenuItems() {
        this.menuItems = [];
        this.menuItems.push({ title: 'Alerts', faIcon: '', url: '/alerts/list' });
        this.menuItems.push({ title: 'Properties', faIcon: '', url: '/properties/list' });
        this.menuItems.push({ title: 'Tenants', faIcon: '', url: '/tenants/list' });
        this.menuItems.push({ title: 'Accounting', faIcon: '', url: '/accounting/transactions/list' });
        this.menuItems.push({ title: 'Task Management', faIcon: '', url: '/todos/list' });
        this.menuItems.push({ title: 'Documents', faIcon: '', url: '/documents/list' });
        this.menuItems.push({ title: 'Reports', faIcon: '', url: '/reports/list' });
        this.menuItems.push({ title: 'Notes', faIcon: '', url: '/notes/list' });
    }

<WrapLayout orientation="horizontal" itemWidth="120" class="menu">
        <StackLayout orientation="vertical" *ngFor="let item of menuItems" (tap)="selectMenuItem(item)">
            <Label class="fas" text="{{ item.faIcon }}"></Label>
            <Label class="fas" [text]="item.faIcon"></Label>
            <Label class="title" [text]="item.title"></Label>
        </StackLayout>
    </WrapLayout>

...然后它将 faIcon 字符显示为文本而不是实际图标。如何显示实际图标？

标签： angularnativescriptfont-awesomenativescript-angular

Answer 1

答案是在 Component.ts 中对字体超赞的图标进行编码：

this.menuItems.push({ title: 'Alerts', faIcon: String.fromCharCode(parseInt('f0f3', 16)), url: '/alerts/list' });