Button text with font awesome icon and translated text not working


#1

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

image


#2

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

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

Any help?


#3

{{translator.l.Exit}}

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;
fonticon_1.TNSFontIcon.loadCss();
var resources = application.getResources();
resources["fonticon"] = fonticon;
application.setResources(resources);

#4

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.
{{translator.l.Exit}}

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


#5

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>

#6

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


#7

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


#8

Above code displays this.

image

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.


#9

This worked.

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