Nativescript-vue implement font icon not working

Question

I'm struggling on how to implement font icon in nativescript-vue, I decided to use font-awesome 5 and followed a bunch of different tutorials, unfortunately, It still now working for me. Some devs have an output of a question mark, but for me, nothing is displaying. I've been stuck on this task for a long time now. I would really deeply appreciate some help.

Thank you :)

I'm using:

Typescript-vue-decorator
Nativescript v6.4

This is one of the steps I have followed thoroughly NativeScript + Vue.js + FontAwesome

Output

I guess the demo code is written based on FontAwesome 4, if you are using FontAwesome 5, ensure you have right font family & icon name assigned. If you still have issues, please share a Playground sample. — Manoj
Thank you! I got it working now. I discovered that I had an issue with the first load of the page. Font Icon is not working on the first load but when I tried to navigate to another page with font icons code on it, it works. Well, forgot to mention I'm using vue-navigator. — Ralph Ryan Tolipas

Luke Luke · Accepted Answer · 2020-04-23T08:34:27

Total rookie here, but I was having huge drama getting it working. I reverted to using FA4.7. Still no joy. Ran up a Playground instance and the darn thing worked.

The only thing that was different for me was that my local default app.scss file started with these style references:

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

Whereas the playground defaults to the actual css files:

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

I updated my app.scss file to use the above css references and hey presto, font-awesome icons work. I have not gone to the effort of retrying with FA5 but its a good chance this might be the trick.

I hope this helps someone else. All the best.

The playground instance is available here.

Nativescript-vue implement font icon not working

1 Answers