Font awesome not rendering well on iOS and Android doesn't even show it


Hi team, I have some issues trying to use a fa-icon on ActionBar.

Here is the code:

<ActionBar title="Beyond" tkToggleNavButton>
    <NavigationButton [text]="'fa-bars' | fonticon" class="fa" ios:visibility="collapse" (tap)="toggleDrawer()"></NavigationButton>
    <ActionItem [text]="'fa-bars' | fonticon" class="fa"  ios.position="left" android:visibility="collapse" (tap)="toggleDrawer()"></ActionItem>
    <StackLayout orientation="horizontal"
      <Image src="res://logo_login" class="action-image"></Image>
      <Label text="eyond"  class="action-label"></Label>
    <Label [text]="'fa-bars' | fonticon" class="fa"></Label>

and here is the result:

Any help will be appreciated it


Hi, there are a few more steps involved to be able to use ‘fa’ like that which you may or may not have taken. Can’t tell from this example. Please refer to this SO answer for a few hints:


Now works!

<ActionBar android.title=" eyond" android.icon="res://icon" android.iconVisibility="always">
    <ActionItem ios.position="left">
        <Label class="m-5 fa" [text]="'fa-bars' | fonticon" (tap)="toggleDrawer()"></Label>
    <ActionItem text="Item" ios.position="right" android:visibility="collapse">
        <StackLayout orientation="horizontal"
            <Image src="res://logo_login" class="action-image"></Image>
            <Label text="eyond"  class="action-label"></Label>
    <NavigationButton icon="res://ic_arrow_back_black_24dp" (tap)="goBack()"></NavigationButton>

Main reason was that fontawesome icon must be nested to Action Item!

Like this: ActionBar > ActionItem > Label [text]="‘fa-bars’ | fonticon"


how did you achieve it, like in your app.css , because i cant even show fonticon in anything, from Label to Button??

<Label text="{{fa-home | fonticon}}" class="fa"/>

and in my app.css

.fa {
  font-family: FontAwesome;

as per the readme, but i see you are using

so what am i missing?? why are the attribute “text” in Braces?

  • Because is a regular expresion

Have you installed nativescript-ngx-fonticon?

also you need to import it on app.module.ts as follows:

import { TNSFontIconModule } from "nativescript-ngx-fonticon";
    imports: [
          'fa': './fonts/font-awesome.min.css'

Then you must import the TNSFonIconService your component file (where you want to use fontawesome). Something like:

import { TNSFontIconService } from "nativescript-ngx-fonticon";

export class YourComponent {
    constructor(private fonticon: TNSFontIconService){ }

finally my css looks like this:

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


no am using Javascript and xml