1

I'm just not succeeding in using FontAwesome icons in my Nativescript-Vue app. If I just want to use a regular icon, it works fine:

<Label col="0" text.decode="&#xf279;" class="fa"></Label>

But when I want a Solid (or I suppose any of the others), no love.

<Label col="0" text.decode="&#xf5da;" class="fa fas"></Label>

I've looked at so many instructions now that my eyes are crossed. Today I upgraded to v5. But I don't thing I was able to get the solid ones to work before.

Ed Jones
  • 653
  • 1
  • 4
  • 19
  • May I know why you are applying both fa and fas (assuming you have defined different font family in each class), you are suppose to apply only one? Can you post the definition of both classes if you still have the issue. – Manoj Feb 08 '20 at 03:59
  • Manoj, I thought my older instructions had said to use both? – Ed Jones Feb 08 '20 at 11:22
  • Anway, I am trying to use version 5, and the instructions here seem to imply that they define fas in the plugin, and that it is default? https://github.com/FortAwesome/vue-fontawesome#using-solid-icons – Ed Jones Feb 08 '20 at 11:24

2 Answers2

3

I work with Nativescript-Vue and I use Nathan Walker plugin nativescript-fonticon. It works very fine with FontAwesome 5.

It's very easy to use.

  1. Install the plugin:

    npm install nativescript-fonticon --save

  2. Place font icon .ttf files in app/fonts

    fa-brands-400.ttf fa-regular-400.ttf fa-solid-900.ttf

  3. Create base class (my css file is placed in assets/scss/global.scss):

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

  4. Copy css to app somewhere. I place my files in assets\css folder (I use minified format):

    assets/css/all.min.css assets/css/brands.min.css assets/css/fontawesome.min.css assets/css/regular.min.css assets/css/solid.min.css

  5. Add and load the plugin in main.js

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

    // Load TNSFonticon TNSFontIcon.debug = true TNSFontIcon.paths = { fa: './assets/css/fontawesome.min.css', far: './assets/css/regular.min.css', fas: './assets/css/solid.min.css', fab: './assets/css/brand.min.css' } TNSFontIcon.loadCss() Vue.filter('fonticon', fonticon)

  6. Use the component in your code:

    <Label class="fas" text="fa-chess-knight | fonticon"></Label>

Keith OYS
  • 2,285
  • 5
  • 32
  • 38
IgnacioLA
  • 31
  • 3
0

Nothing I tried from the V5 instructions seemed to work. (Maybe someone can write explicit instructions for using in Nativescript-Vue.)

But, falling back to the old way, the simple

<Label col="0" text.decode="&#xf5da;" class="fas"></Label>

with

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

And, I must have somehow been interupted when I first set this up, because fa-solid-900 was not actually in my [app.fonts][1] folder. :-|

Not sure what all those fancy new packages I installed will do now.

Ed Jones
  • 653
  • 1
  • 4
  • 19