0

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

Ralph Ryan Tolipas
  • 3
  • 2
  • 1
    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 Apr 22 '20 at 15:09
  • 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 Apr 27 '20 at 14:46

1 Answers1

0

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.

Luke
  • 13
  • 1
  • 6
  • OK. On reflection, totally irrelevant. I am using Android Studio emulator to test. Whenever the build updates the changes for fonts do not show. Closing/Re-opening or uninstalling/re-installing seems to make no difference. But, selecting the back icon (on android) then opening the app again, the icons show. Very odd, but thats what it was all along for me. – Luke Apr 23 '20 at 10:43
  • Thank you! I got it working now, I got an issue with the initial page load. – Ralph Ryan Tolipas Apr 27 '20 at 14:47