在 NativeScript 视图中动态渲染 FontAwesome 图标答案

【问题标题】：Dynamically render FontAwesome icon in NativeScript view在 NativeScript 视图中动态渲染 FontAwesome 图标
【发布时间】：2021-02-07 16:16:53
【问题描述】：

如果我尝试在 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: '&#xf0f3;', url: '/alerts/list' });
        this.menuItems.push({ title: 'Properties', faIcon: '&#xf015;', url: '/properties/list' });
        this.menuItems.push({ title: 'Tenants', faIcon: '&#xf007;', url: '/tenants/list' });
        this.menuItems.push({ title: 'Accounting', faIcon: '&#xf09d;', url: '/accounting/transactions/list' });
        this.menuItems.push({ title: 'Task Management', faIcon: '&#xf00c;', url: '/todos/list' });
        this.menuItems.push({ title: 'Documents', faIcon: '&#xf15c;', url: '/documents/list' });
        this.menuItems.push({ title: 'Reports', faIcon: '&#xf659;', url: '/reports/list' });
        this.menuItems.push({ title: 'Notes', faIcon: '&#xf249;', 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 字符显示为文本而不是实际图标。如何显示实际的图标？

【问题讨论】：

标签： angular nativescript font-awesome nativescript-angular

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您需要使用 String.fromCharCode()

对图标 Unicode 进行解码

view.text = String.fromCharCode(0xf0f3)

【讨论】：