0

我想在我的 Nativescript-Angular 应用程序中使用 Font Awesome 5。我按照下面的文章做了所有的事情，但我总是把图标变成“？” 适用于 iOS 和适用于 Android 的“X”。

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 文件复制到新创建的文件夹中。下面是截图：-

在此处输入图像描述

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

请在这里帮助我。

4

1 回答 1

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;
}

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

于 2021-01-22T11:42:22.560 回答