Nativescript-vue 实现字体图标不起作用

Posted 2023-04-13

【中文标题】Nativescript-vue 实现字体图标不起作用

【英文标题】：Nativescript-vue implement font icon not working

【发布时间】：2020-08-05 11:23:11

【问题描述】：

我正在为如何在 nativescript-vue 中实现字体图标而苦苦挣扎，我决定使用 font-awesome 5 并遵循了一堆不同的教程，不幸的是，它现在仍然对我有用。一些开发人员有一个问号的输出，但对我来说，什么都没有显示。我已经被这个任务困了很长时间了。我非常感谢一些帮助。

谢谢你:)

我正在使用：

Typescript-vue-decorator Nativescript v6.4

这是我彻底遵循的步骤之一 NativeScript + Vue.js + FontAwesome

Output

【问题讨论】：

我猜演示代码是基于 FontAwesome 4 编写的，如果您使用的是 FontAwesome 5，请确保您分配了正确的字体系列和图标名称。如果您仍有问题，请分享 Playground 示例。

谢谢！我现在开始工作了。我发现我在第一次加载页面时遇到了问题。字体图标在第一次加载时不起作用，但是当我尝试导航到另一个带有字体图标代码的页面时，它可以工作。好吧，忘了说我正在使用 vue-navigator。

【参考方案1】：

这里的新秀，但我有很大的戏剧性让它发挥作用。我恢复使用FA4.7。仍然没有喜悦。跑了一个 Playground 实例，该死的东西起作用了。

对我来说唯一不同的是我的本地默认 app.scss 文件以这些样式引用开头：

    @import '~@nativescript/theme/core';
    @import '~@nativescript/theme/default';

而游乐场默认为实际的 css 文件：

    @import '~@nativescript/theme/css/core.css';
    @import '~@nativescript/theme/css/default.css';

我更新了我的 app.scss 文件以使用上面的 css 引用，嘿，字体真棒图标工作。我还没有尝试使用 FA5 重试，但这很有可能是诀窍。

我希望这对其他人有所帮助。一切顺利。

游乐场实例可用here。

【讨论】：

好的。回想起来，完全无关紧要。我正在使用 android Studio 模拟器进行测试。每当构建更新时，字体的更改都不会显示。关闭/重新打开或卸载/重新安装似乎没有什么区别。但是，选择后退图标（在 android 上）然后再次打开应用程序，图标会显示。很奇怪，但这就是我一直以来的情况。

谢谢！我现在可以正常工作了，我遇到了初始页面加载问题。