如何解决如何在 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
步骤如下:-
- 从“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://" stretch="none" class="fas"></Image>
<Label text="" class="far"></Label>
<Label text="" 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 方式相同。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。