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

【问题标题】：How to use Font Awesome 5 in Nativescript Angular application?如何在 Nativescript Angular 应用程序中使用 Font Awesome 5？
【发布时间】：2021-01-11 12:55:15
【问题描述】：

我想在我的 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

接下来的步骤：-

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

在 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 中工作。

请帮帮我。

【问题讨论】：

标签： nativescript font-awesome-5 angular-nativescript angular-fontawesome

【解决方案1】：

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

/*
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 方式相同。

【讨论】：