Font Awesome support


#1

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!


#2

Did you try nativescript-fonticon?

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


#3

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


#4

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

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

file:

image

usage:

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


#5

Does it work for you with SCSS?


#6

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.


#7

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

image


#8

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>?


#9

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…


#10

maybe you can check this


#11

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.


#12

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.