[Nativescript-Vue] nativescript-fonticon v2 - update guide

[erwol]

Hi, I cannot make this plugin works when using its version 2. I'm trying to follow [https://nativescript-vue.org/blog/using-fonticons/](this tutorial: https://nativescript-vue.org/blog/using-fonticons/) with no success. Any thoughts?

[brunnich]

Hi,
You just need to put font file in app/fonts (folder already created normally) instead of app/assets/fonts.
That's how I made it work :)

[matrunchyk]

1. Put your FontAwesome.ttf into app/fonts
2. Create app/assets/font-awesome.css file with a content like the following one:

.fa {
  font-family : FontAwesome;
}

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}

.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

3. Install the package (if not installed yet): npm install nativescript-fonticon --save
4. Change your main.js file to contain the following:

import { TNSFontIcon, fonticon } from 'nativescript-fonticon';

TNSFontIcon.debug = true;
TNSFontIcon.paths = {
  'fa': './assets/font-awesome.css',
};

// Simple variant:
// TNSFontIcon.loadCss();

// Or verbose variant:
TNSFontIcon.loadCss().then(() => {
  console.log('FontAwesome font collection loaded successfully.');
}).catch((e) => {
  console.log('Error loading FontAwesome font collection!', e.getMessage());
});

Vue.filter('fonticon', fonticon);

5. Use it like this:
   <Label class="fa" :text="'fa-music' | fonticon"></Label>

[thearabbit]

excuse me, could you example for TabViewItem

[thukuwanjiku]

@matrunchyk Mine isn't working. I've tried it countless times, it doesn't work

I have both the css and .ttf files in the right directories

I have the package installed

My main.js is setup

But this fontawesome icon in this template

does not render

Please help.

[matrunchyk]

@thukuwanjiku @thearabbit Did you try to name the files exactly the same as in the steps I have provided? Some browsers require the name of the font file to be exactly the same as font-family name.

[thearabbit]

This is my structure

// app.scss
.fa {
  font-family: FontAwesome, fontawesome-webfont;
}

// main.js
// FontAwesome
import { TNSFontIcon, fonticon } from "nativescript-fonticon";

TNSFontIcon.debug = true;
TNSFontIcon.paths = {
  fa: "./assets/styles/font-awesome.css"
};
TNSFontIcon.loadCss();
Vue.filter("fonticon", fonticon);

[thukuwanjiku]

@matrunchyk I sure did, again and again, it just won't work. Perhaps if you spare a minute and build a blank app with the icons working you could share with me and have me build on top of it. I'd appreciate.

[vincentderidder]

I cannot get it to work either. Did someone figure out how to make it work with nativescript-vue?

[matrunchyk]

It works for me in my current project. I'll share an example with you tomorrow and will update Docs as well.

[vincentderidder]

That would be helpfull, looking forward to it!

[kstan79]

it doesn't work to me too.

[kstan79]

i'm remove and rebuild entire project, it work again. Hope this help

[khalidkaram]

I had the same issue, the problem was my webpack config.
This part was missing:

new CopyWebpackPlugin([
                { from: "fonts/**" },
                { from: "**/*.+(jpg|png)" },
                { from: "assets/**/*" },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

I hope this hep!

[jbosse]

@matrunchyk thanks for the /assets tip. It seems that the underlying Nativescript file-system component cannot read files in the app root.