Getting Font Awesome, v 5.0+, to work


#1

I am trying to add some fonts using font awesome. I am using Nativescript Angular. Haven’t been able to get it to work.

Font Awesome seems to have a slightly different format with its (relatively) new version 5.0+. The existing Nativescript guidance I have found says download the ‘fontawesome-webfont.ttf’ file, but I don’t believe this file exists in the current Font Awesome iteration. Now, it seems, there is a Font Awesome “solid” collection, as well as a Font Awesome “regular” collection (and also a “Brands” collection). Here’s the cheatsheet: https://fontawesome.com/cheatsheet .

My app now (on ios–haven’t tried android yet) just shows a question mark where the relevant icon should be. Anyone know how to get it to work?

My steps:

  1. download Font Awesome from https://fontawesome.com/ . Current version: 5.0.10.
  2. take the file ‘fa-solid-900.ttf’ (found under ‘fontawesome-free-5.0.10 / web-fonts-with-css / webfonts’ ) and put in in app/fonts.
  3. use the cheatsheet to get the unicode value of the font I want.

Then code:

css:

.fa {
    font-family: FontAwesome ; fa-solid-900   /* Note: this is one possible source of issue. I have not nailed down what exactly should be written here */
}

html:

<Label class="fa" text='&#xf2b9;'></Label>

The icon I am using here is the first one on the cheat sheet in the “solid” group (should be an address book icon). I have escaped the unicode in the html with ‘&#x’ before and ‘;’ after. (I was surprised this is not made more clear in the docs to do this–if I don’t do this, there is no escaping.)

Result right now: question mark icon.

What I am I doing wrong?

Thanks.


#2

I am also using the same, only difference is that my font name is in inverted commas.And have a (,) instead of (semicolon)
.fa {
font-family: “FontAwesome,fa-solid-900”
}


#3

Thanks, but that does not seem to make a difference for me. Did you do like I have done?

My steps:

  1. download Font Awesome from https://fontawesome.com/ Current version: 5.0.10.

  2. take the file ‘fa-solid-900.ttf’ (found under ‘fontawesome-free-5.0.10 / web-fonts-with-css / webfonts’ ) and put in in app/fonts.

  3. use the cheatsheet to get the unicode value of the font I want.

  4. Then code:

css:

.fa {
    font-family: "FontAwesome,fa-solid-900";  /* Note: this is one possible source of issue. I have not nailed down what exactly should be written here */
}

html:
<Label class="fa" text="&#xf2b9;"></Label>

Doing these steps, I still get a question mark.


#4

Bump. Just following up to see if folks have more details on how to use the updated Font Awesome.


#5

I just realised one more difference that FontAwesome.otf , .ttf and .woff files are also there in my app/.fonts directory.


#6

Thanks. I still have not been able to get font-awesome 5.0+ to work.

I had previously downloaded font-awesome 4.7. Using that, it worked, as follows:

file: font-awesome-4.7.0 >> fonts >> fontawesome-webfont.ttf (take this file and put it in app >> fonts)

html:
<Label class="fa" text="&#xf017;"></Label>

css:

  .fa {
		font-family: 'FontAwesome', 'fontawesome-webfont';
	  }

This now shows a clock icon.

Unicodes at: https://fontawesome.com/cheatsheet#why-regular.

To put into app, use the code with &#x before and ; after, like: text="&#xf0c2;"


#7

Try…

.fa {
    Font-family: 'Font Awesome 5 Free';
}

The capital F in “Font” was the key for me. Also there’s a bug with solid where it is encoded as font weight 400. See: https://github.com/NathanWalker/nativescript-ngx-fonticon/issues/37