NativeScript + Vue.js + FontAwesome

Question

I'm trying to use FontAwesome icon set to build an application over NativeScript and Vue.js but I can't figure out the problem since I not even have an error prompt message.

I'm following the documentation as a faithful but nothing happens. I search everywhere but.. nothing.

If you can help me with this I'd be so grateful.

Documentation: https://nativescript-vue.org/blog/using-fonticons/

Thanks!

SOLUTION

• Create a folder named fonts in the app folder
• Generate a style file and put the following code

.fa { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-regular-400'; }
.fas { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-solid-900'; }
.fab { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-brands-400'; }

The font-family first part is to name the font family, and after the comma, we will write the path to those fonts.

Answer 1

To get the Brands and Pro FontAwesome 5 fonts working in NativeScript-Vue, install nativescript-fonticon, npm install nativescript-fonticon --save, as described in the documentation Using Fonticons, and from FontAwesome download both the webfonts and desktop fonts. In the directory app/fonts add the .ttf files from the webfonts directory of the web download. iOS also requires the .otf files from the otfs directory of the desktop download so add these to the app/fonts directory as well and rename the basename of the .otf files to match the corresponding basename of the .ttf file

In app/assets add the corresponding css files from the css directory of the web font download (or the all file).

Now add the following to app.scss (note that light and solid don't work properly without font-weight properly defined)

.fa {
  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;
}

and the following to main.ts

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

TNSFontIcon.debug = true;
TNSFontIcon.paths = {
  // 'fa': './assets/css/all.min.css',
  // 'fal': './assets/css/all.min.css',
  // 'far': './assets/css/all.min.css',
  // 'fas': './assets/css/all.min.css',
  // 'fab': './assets/css/all.min.css',
  'fa': './assets/css/fontawesome.min.css',
  'fal': './assets/css/light.min.css',
  'far': './assets/css/regular.min.css',
  'fas': './assets/css/solid.min.css',
  'fab': './assets/css/brands.min.css'
};
TNSFontIcon.loadCss();

Vue.filter('fonticon', fonticon);

Now delete the platforms directory to make sure everything gets bundled correctly and you should be good to go. Use it like

  <StackLayout orientation="horizontal" horizontalAlignment="center" verticalAlignment="top">
    <Label class="fab" :text="'fa-git' | fonticon" />
    <Label class="fal" :text="'fa-plus-square' | fonticon" />
    <Label class="fa" :text="'fa-plus-square' | fonticon" />
    <Label class="fas" :text="'fa-plus-square' | fonticon" />
  </StackLayout>

To make things even easier there is plugin Vue-Fonticon that is essentially the following code which I copied into app/components/FontIcon.vue

<template>
  <Label
    :class="type"
    :color="color"
    :fontSize="size"
    :text="name | fonticon"
    :width="size"
    textAlignment="center"
    @tap="$emit('tap')"
  />
</template>

<script>
  export default {
    name: 'FontIcon',
    props: {
      color: {
        type: String,
        default: 'black'
      },
      name: {
        type: String,
        required: true
      },
      size: {
        type: [String, Number],
        default: 15,
        validation: s => !isNaN(s)
      },
      type: {
        type: String,
        default: 'fa'
      }
    }
  }
</script>

To use it, in main.ts add

import FontIcon from './components/Utility/FontIcon.vue'

Vue.component(FontIcon.name, FontIcon)

and use it as

  <StackLayout orientation="horizontal" horizontalAlignment="center" verticalAlignment="top">
    <FontIcon name="fa-play"/>
    <FontIcon name="fa-play" type="fal"/>
    <FontIcon name="fa-play" type="fas"/>
    <FontIcon name="fa-git" type="fab"/>
  </StackLayout>

Answer 2

It worked for me using FontAwesome 4.7.0. Since version 5.0, the packaging of font awesome changed and using ttf is not the recommended way anymore, perhaps using font awesome 5.x is more tricky in nativescript-vue.

You can download it there : https://fontawesome.com/v4.7.0/

Use fontawesome-webfont.ttf as explained in the doc and rename it to FontAwesome.ttf, copy font-awesome.min.css too

in your app.scss, don't forget this (the font family is the name of your ttf file)

.fa {
   font-family: FontAwesome;
}

And remember to check your icon names on the v4.7, some are new in v5

In debug mode, when your app starts, you should see :

JS: 'Collections to load: fa'
JS: '----------'
JS: 'Loading collection \'fa\' from file: ./fonts/FontAwesome.css'
JS: 'fa-glass: \\uf000'
JS: 'fa-music: \\uf001'
JS: 'fa-search: \\uf002'
JS: 'fa-envelope-o: \\uf003'
...