如何在 Nativescript Angular 应用程序中使用 Font Awesome 5？

问题描述

我想在我的 Nativescript-Angular 应用中使用 Font Awesome 5。我按照下面的文章做了所有相同的事情，但我总是将图标显示为“？”适用于 iOS，“X”适用于 android。

Nativescript 版本 - 6.5，Angular 版本 - 8.0

https://medium.com/alexonozor/fontawesome-5-and-nativescript-4-2-angular-ca29826f9346

步骤如下：-

1. 从“https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself”下载了 Font-Awesome v5.1.15
2. 在我的应用程序中创建了一个名为“fonts”的新文件夹，并将其保存在 src 文件夹下。将所有 ttf 文件复制到新创建的文件夹中。下面是截图：-

3. 在 app.css 中添加行并在 HTML 中使用 font-awesome 5，如下所述：-

/*app.css*/
.far {
    font-family: Font Awesome 5 Free,"fa-regular-400";
    font-weight: 400;
}

.fab {
    font-family: Font Awesome 5 Brands,fa-brands-400;
    font-weight: 400;
}

.fas {
    font-family: Font Awesome 5 Free,fa-solid-900;
    font-weight: 900;
}

/*html*/
<Image src="font://&#xf51e;" stretch="none" class="fas"></Image>
<Label text="&#xf019;" class="far"></Label>
<Label text="&#xf39e;" class="fab"></Label>

它没有返回实际图像。如果我在 Nativescript Playground 中遵循相同的步骤，那么它运行良好，但我无法在 VS Code 中运行。

请在这里帮助我。

解决方法

尝试在字体名称和文件名周围添加双引号。

/*
File name: fa-solid-900.ttf
Font name: Font Awesome 5 Free
*/
.fas {
    font-family: "Font Awesome 5 Free","fa-solid-900";
    font-weight: 900;
}

如果它仍然不起作用，您应该考虑使用位于 here 的 nativescript-fonticon。它更易于使用，与 Web 方式相同。