Nativescript and FontAwesome

Question

I am trying to use icon font FontAwesome in Nativescript application, which is possible according to this article https://www.nativescript.org/blog/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon

I did everything that is described in that article:

• Added .ttf in app/fonts

• Added class in app.css

  .fa{ font-family: "FontAwesome"; }

• Used it in XML like so

  text="" class="fa"

But result is rather disappointing:

I also tried the "\uf230" syntax, but that renders as plain text.

What am I doing wrong?

Answer 1

Could be a few things. Does it work on iOS? As your CSS definition is iOS compatible, not Android as Android needs the actual filename (without extension) whereas iOS needs the font name. So I have this to be xplatform-ready (the file is 'fontawesome-webfont.ttf'):

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

The \f005 syntax is OK (<Label class="fa" [text]="'\uf005'"></Label>), but I'm using the splendid nativescript-ngx-fonticon plugin (there's also a non-Angular one) to be able to do this instead:

<Label class="fa" [text]="'fa-shopping-basket' | fonticon"></Label>

Answer 2

To make it work, you must make sure that the "fonts" directory is inside the "app" folder and that the following files exist:

font-awesome.eot
font-awesome.ttf

I opted to adopt this font as the default of my application, so I do not have to worry about where I'm going to use it and how much to enter the right class, everything is getting very good and the result is perfect.

In CSS, you only have to define a selector according to your interest for the source to be used, so just use the directive:

page {
  font-family: 'FontAwesome'
} 

Then where you want an icon, just use an html entity that represents it as it searches the site: http://fontawesome.io/icons/

See images:

You can see this video where I was based to start. It corrects in the video the extension used to be attentive.