Fontawesome 5 Pro

[davorpeic]

Hi,

been fighting few days to get working new Fontawesome 5 icons, but with no luck, I tried calling font-family by several ways.

Has anybody got it working and could share how can be done? thanks

[davorpeic]

I assume it could be related to how the webfont is encoded as debug shows this *FontAwesomeusestheUnicodePrivateUseArea

[cnikh]

Hi @davorpeic below code is working for me

font-family: "Font Awesome 5 Free" ,"fa-solid-900","fa-regular-400","fa-brands-400";

fa-solid-900,fa-regular-400 ,fa-brands-400 are the ttf filenames in fonts folder.

Hope it helps

[bl1nkr]

@cnikh solution worked great for me. I had been wrestling with this for a few hours. Thanks so much!

[dali-gharbi]

hi @cnikh , could you please provide more information about the solution to integrate font awesome pro 5 ?

we are always having regular style not the light one only on iphone.

TNSFontIconModule.forRoot({
   mdi: 'fonts/materialdesignicons.css',
   fa: 'fonts/font-awesome.css',
   far: 'fonts/fa-regular.css',
    fal: 'fonts/fa-light.css'
}),

.fal {
        font-family: 'Font Awesome 5 Pro', fa-light-300;
}
.far {
    font-family: 'Font Awesome 5 Pro', fa-regular-400;
}

<Label row="1"
       class="fal" 
       [text]="'fa-user-alt' | fonticon"
        verticalAlignment="center" 
        horizontalAlignment="center">
</Label>

[JCAguilera]

@dali-gharbi did you make it work? I'm having trouble with this too.

[dali-gharbi]

@JCAguilera i used images icons instead of fonts

[JCAguilera]

I solve it without this plugin. Made a guide https://thejuankyblogs.webnode.cl/l/font-awesome-5-con-nativescript-angular/ (Spanish) https://medium.com/@JCAguilera/fontawesome-5-and-nativescript-22653f2b3bac (English)

[davorpeic]

Awesome @JCAguilera te ganaste una cerveza!

This works putting unicode snippet directly into text, I was trying to make this play together with fonticon but with no luck. Will close it as there is partial solution to get Fontawesome 5 to work, but would love to see this work with this plugin.

[wanpeng2008]

@JCAguilera Your solution works well with this plugin. I follow your guide and import the plugin:

1. copy all css and ttf files to app/fonts
2. add .fas to app.css
3. TNSFontIconModule.forRoot({'fa': './fonts/fontawesome-all.css'})

Then it works <Label class="fas " [text]="'fa-home' | fonticon" >

[davorpeic]

Just an addition, to get this method to work with Fontawesome Pro (no free) and in IOS, you must use .otf font together with .ttf.

[tcrgit]

Using both the solid and the regular (in Free) continues to be an issue in iOS. Font-weight does not appear to differentiate them; solid always seems to take precedence.

I expect that this is an iOS issue due to the same internal ttf font name ("Font Awesome 5 Free") for both font files. Android relies on the filename, so the problem doesn't show up there.

For now, I have worked around this by using only the regular from 5, and an older version of fontawesome for solid.

[davorpeic]

@tcrgit Hi, I had the same issue and I fixed it by placing other fonts and now I see all 3 styles in ios, check my image and try

[tcrgit]

Thanks but there isn't an otf for the Free font set [EDIT: I was wrong about this--there is]. When I opened up the fa-solid-900.ttf file in a font editor (BirdFont), I noticed that the font-weight was incorrectly set to 400 (not 900). This is a bug on the part of the Font Awesome project.

I reset the font-weight to 900, saved and exported to ttf, renaming the resulting file to 'fa-solid-900.ttf'. I then replaced the old ttf with the new ttf file into my apps/fonts folder.

Now using "font-weight: 400" (vs 900) in css works as expected to switch between regular and solid, even though they are still named the same, and in the same font-family.

I expect that there is a similar problem with Font Awesome 5 Pro for its ttf files. Probably the weight setting is correct in the otf files.

[davorpeic]

I copied the one from "use-on-desktop" and renamed them, they are not in "web-fonts-with-css" folder, they are larger then other, but I managed to get it work, can you try?

[tcrgit]

I found the otf fonts in the use-on-desktop folder, you are correct and they do come in the free package. However, the Birdfont font editor still shows the font weight for the solid otf font files as 400, not 900.

I have no idea why your solution would work then.

[edited for clarity]

[tcrgit]

@davorpeic I got a chance to try your add-the-otfs solution and recompile. It did not work for me.

I opened a bug report at FontAwesome as I think this is an error on their part, or maybe further down the tool chain. Apple tends be persnickety in its implementation of standards, particularly in iOS, and the internal font-weights being the same probably just doesn't manifest in other environments.

In any case, fixing it yourself -- or I am happy to share the edited ttf for fa-solid-900 Font Awesome Free -- is probably the best solution for now, especially because adding multiple font types leads to app size bloat. It took me about 10 minutes to learn to use a free font editor to make this simple change, and then I could use both fonts in my app.

[Ethanhackett]

@JCAguilera comment above helped me get Font Awesome 5 Pro working.

One small tweak I needed to make since I'm using Vue.js was to make the text value dynamic like this

// Instead of this
<Label class="fas" style="margin-top: 10px" text="&#xf013;"></Label>

// Do this
<Span class="fas" v-bind:text="getIcon('f359')"></Span>
// then in your methods or as a global method
methods: {
  getIcon: function(icon) {
    return String.fromCharCode(parseInt(icon, 16));
  }
}

---

Update:

I made a reusable Vue.js component for future use in Vue.js Native Script apps. It searches the icons.json file that's included with Font Awesome to retrieve the correct character code by name like this

<icon :name="'alarm-clock'"></icon>

Font Awesome 5 Pro - Vue.js + Native Script Component

[prestopasto]

I can also confirm that changing the font-weight in the .ttf file with BirdFont worked for me. It appears all of the fonts have their weight set to 400 by default.

[alexonozor]

Thanks but there isn't an otf for the Free font set [EDIT: I was wrong about this--there is]. When I opened up the fa-solid-900.ttf file in a font editor (BirdFont), I noticed that the font-weight was incorrectly set to 400 (not 900). This is a bug on the part of the Font Awesome project.

I reset the font-weight to 900, saved and exported to ttf, renaming the resulting file to 'fa-solid-900.ttf'. I then replaced the old ttf with the new ttf file into my apps/fonts folder.

Now using "font-weight: 400" (vs 900) in css works as expected to switch between regular and solid, even though they are still named the same, and in the same font-family.

I expect that there is a similar problem with Font Awesome 5 Pro for its ttf files. Probably the weight setting is correct in the otf files.

I will suggest you follow this step on this medium posts https://medium.com/alexonozor/fontawesome-5-and-nativescript-4-2-angular-ca29826f9346

[DepickereSven]

@Ethanhackett I tried your code. It does nothing. I get nothing on my screen.

This was in my Start.vue file:

<icon :name="'signal'"></icon>

I logged this:

console.log(icons[this.name].unicode);
console.log(String.fromCharCode(parseInt(icons[this.name].unicode, 16)));

This is the result:

JS: 'f012'
JS: ''

This is the CSS:

.far {
    font-family: 'Font Awesome 5 Free', fa-regular-400;
    font-size: 40em;
}

.fab {
    font-family: 'Font Awesome 5 Brands', fa-brands-400;
    font-size: 40em;
}

.fas {
    font-family: 'Font Awesome 5 Free', fa-solid-900;
    font-size: 40em;
}

I don't know what I did wrong. I'm using the no pro version of Font Awesome

[tskweres]

Having issues getting this to work in a lazy-loaded module, any ideas?

Structure: src

• app.module
• /fonts -fontello.css
• /app -/tabs -tab.module

I imported TNSFontIconModule to the app.module, and the lazy loaded tabs.module, my code looks like:

TNSFontIconModule.forRoot({
     'ft': '../fonts/fontello.css',
}),

No errors, but the font icons don't show. If I do it the annoying way using ⍃ it works

[markosole]

@davorpeic Pozdrav Davore,

I have problems with Font Awesome 5 Pro which does not work for me on iOS. I have tried many thing, including yours suggestion to place .otf files next to the .ttf, what did not help.

I have tried with renaming fonts like FontAwesome5ProLight.otf and using font editor to change the name of the font. Any way, I have downloaded another regular google font, Roboto and it works for Android but not on iOS. So I am thinking that there must be something else wrong here.

This how I use fonts:

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

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

    .fas {
      font-family: Font Awesome 5 Free, fa-solid-900;
      font-weight: 900; 
    }
    .fal {
      font-family: Font Awesome 5 Free, fa-regular-400;
      font-weight: 400; 
    }  
    .fam {
      font-family: Font Awesome 5 Free, fa-regular-400;
      font-weight: 400; 
    } 

    // Font icon class
    .fa {
        font-family: "FontAwesome";
    }

    .fa-brands {
      font-family: "Font Awesome 5 Brands", "fa-brands-400";
      }
    .roboto {
      font-family: "Roboto", "RobotoCondensed-Bold";
    }

It works for Android but not for iOS. Any other suggestions?

UPDATE:

I've found solution here: https://github.com/NathanWalker/nativescript-fonticon/issues/22

[Asata777]

You should to use «require» TNSFontIconModule.forRoot({ 'fa': require('../assets/css/all.css') })