Can you document how to use font files (and FontAwesome) ?

I was reading this: https://nativescript-vue.org/blog/using-fonticons/

It says

Import your fonticon’s font files (normally a .ttf, TrueType Font) into src/assets/fonts

The problem is that the template nativescript-vue/vue-cli-template has not the srcfolder at all. It hasapp`.

It has app/assets, but fonts are under app/fonts.

I tried to simply ignore the different folder structure, but this way the font icon are simply not shown… 😦

So, in general, aside to kindly ask you to update this page, I’d like a page where is documented how to add new font file to the basic standard template AND be able to use it on ios (because on Android I have no problem at all)

[RishatM]

@realtebo The way I got this working is:

• In my fonts folder I made font-awesome.css file.

• Inside font-awesome.css I added: .fa { font-family : FontAwesome, fontawesome-webfront; }

• Now add the icons to this font-awesome.css .fa-home:before{ content: "\f015"; }

• The list can be found here: http://astronautweb.co/snippet/font-awesome/

• In my main.js I added: import { TNSFontIcon, fonticon } from 'nativescript-fonticon'; TNSFontIcon.debug = true; TNSFontIcon.paths = { 'fa': './fonts/font-awesome.css', }; TNSFontIcon.loadCss(); Vue.filter('fonticon', fonticon);

• Now I display icon I added earlier like this: <Label class="fa" :text="'fa-home' | fonticon"/>

Might not be the best way as I am a beginner but it works.

[jawa-the-hutt]

Here’s what I did to get font awesome to work:

1. Installed this package: https://github.com/emiliogrv/nativescript-vue-fonticon
2. Placed the ttf and otf files from font awesome in src/fonts. I think this would work for app/fonts as well if app is your entry point.
3. Created a file named global.scss in src/styles/scss. It doesn’t really matter where this file is at or what it is actually named. It just matters what you put in it and that you can reference it easily from your main.ts or main.native.ts if using the vue CLI 3 plugin.
4. Here’s the relavent section of code in my global.scss file:

.fa, .far {
  font-family: Font Awesome 5 Pro, fa-regular-400;
  font-weight: 400; 
}

.fas {
  font-family: Font Awesome 5 Pro, fa-solid-900;
  font-weight: 900;
}

.fab {
  font-family: Font Awesome 5 Brands, fa-brands-400;
  font-weight: 400;
}

.fal {
  font-family: Font Awesome 5 Pro, fa-light-300;
  font-weight: 300;
}

1. Inside of your main.ts/main.native.ts file, here is the relevant section to import nativescript-vue-fonticon

import './styles/scss/global.scss';

import FontIcon from 'nativescript-vue-fonticon';
Vue.use(FontIcon, {
  componentName: 'FontIcon', // <-- Optional. Will be the name for component icon.
  debug: false, // <-- Optional. Will output the css mapping to console.
  paths: {
    fa:  'assets/styles/css/font-awesome/fontawesome.min.css',
    fal: 'assets/styles/css/font-awesome/light.min.css',
    far: 'assets/styles/css/font-awesome/regular.min.css',
    fas: 'assets/styles/css/font-awesome/solid.min.css',
    fab: 'assets/styles/css/font-awesome/brands.min.css',
  },
});

1. To use an actual font-awesome image, this is how I use it in a component:

<FontIcon name="fa-sort-amount-down" type="fal" size="22" color="black"/>

Bonus code used to get a nice rounded button look:

<StackLayout verticalAlignment="center" height="36" width="36" backgroundColor="white" borderRadius="18" @tap="hitMe">
  <FontIcon name="fa-sort-amount-down" type="fal" size="22" color="black"/>
</StackLayout>