Button text with font awesome icon and translated text not working


Button text with font-awesome icon and translated text is not working

<Button class=“btn-side-menu font-awesome” text="&#xf08b; {{translator.l.Logout}}">

Above producing this



Using the nativescript-fontawesome plugin also not working, app is just crashing with below markup.

text="{{‘fa-bluetooth’ | fontawesome }} {{translator.l.Exit}} "

Any help?



Whatdo you want with this code? follow the instructions here how to set up your CSS

var fonticon_1  = require("nativescript-fonticon");
fonticon_1.TNSFontIcon.paths = {
	"fa": "font-awesome.css"

var fonticon = fonticon_1.fonticon;
var resources = application.getResources();
resources["fonticon"] = fonticon;


Thank you, but I’m not sure how your suggestion resolves the issue?

I’ve a language translator, below code returns the “Exit” string for chosen language.

Basically I would like to display fontawesome exit icon + word “Exit” as sidedrawer menu item.


You shouldv’e said so in the beginning, i thought you are having issues with fontawesome icons here’s solution

<Button class=“btn-side-menu font-awesome” text="&#xf08b; ">{{translator.l.Logout}}</Button>

but i see you are hard codding the font icon thats why i gave you the first answer it should be

<Button class=“btn-side-menu fa” text="{{fa-logout | fontawesome }}">{{translator.l.Logout}}</Button>


<Button class=“btn-side-menu font-awesome” text="&#xf08b; ">{{translator.l.Logout}}

Thats not working, not sure if you can specify a tag property like this text="&#xf08b; ">{{translator.l.Logout}}


you are missing a closing tag copy this code

<Button class=“btn-side-menu font-awesome” text="&#xf08b; ">{{translator.l.Logout}}</Button>

otherwise share the code for translator so i ca replicate it


Above code displays this.


This is the translator code, “en” is a javascript file with strings and values.

const translator: Observable = new Observable();
translator.set(‘l’, en);

By the way text="{{translator.l.Logout}}" is working without font-awesome icon code.


This worked.

text="{{’&#xf08b; ’ + translator.l.Logout}}"