Font Awesome support


Hi there guys!

I would like to ask if any of you have been able to implement somehow a Font Awesome implementation like when you install font-awesome in an Angular Web Application.

What I mean is that if you can have something like: <Label class="fa fa-android"></Label>.

Right now what I’m doing is to create a custom component <ns-icon [class]="'fa-android'"></ns-icon> which is an input for the Label text combined with a custom pipe that I have already created and reads data from my Icons enumeration (fa_android = 0x(icon code),…) --> <Label [text]="class | fontAwesome" class="fa"></Label>

I have tried the nativescript-nx-fontawesome with no success.

Do you have any other different useful and better in terms of performance and maintainability? If you decide to upgrade to Font Awesome 5 you would have to completely refactor your Icons enum,

Thank you!


Did you try nativescript-fonticon?

At least I use the angular version of same (nativescript-ngx-fonticon), which works great for me.


I saw that this plugin also existed but I had discarded it because it’s outdated (one year ago was the last commit)


Hi ,
not sure if there are differences between IOS and android, but it’s working for me (on IOS) with plain javascript:

.fa {
font-family: “Font Awesome 5 Pro”;




<Label verticalAlignment="middle" row="0" col="0" class="fa left" text="&#xf0d9;" tap="{{ goBack }}"></Label>


Does it work for you with SCSS?


I haven’t tried, but technically it should. SCSS is anyways converted to CSS during build process and you will still give the CSS path in there.


I’m working wits SCSS all the time - i can’t imagine working with css :slight_smile:



Could you provide more details about this approach? How do you load the icons within your app? Something like <Label class="fa fa-android"></Label>?


Im not using fa-android but this instead

<Label verticalAlignment="middle" row="0" col="0" class="fa left" text="&#x**f0d9**;" tap="{{ goBack }}"></Label>

Just replace f0d9 with this code from attachment.

I told you that “not sure if there are differences between IOS and android, but it’s working for me (on IOS) with plain javascript:”

In fact i think you may have issues with android (im working with IOS).
I’ll try to find some infos about this…


maybe you can check this


Hi again, thank you for your answer.

It’s not what I wanted to achieve though.

What I mean is that I would like to get something similar like we might get from normal Angular application + Font Awesome.

<i class="fa fa-bars"></i>

So we don’t have to use the codes for the icons because it’s not readable.


That is the exact purpose of nativescript-fonticon, but as I mentioned I’m active user of Angular version. You might give a try on that plugin.