Nativescript: fontFamily attribute not working in formatted string with binding expression

Created on 27 Jul 2017 · 4Comments · Source: NativeScript/NativeScript

I have this XML:

<Label tap="onWorkingHoursDailyViewClick">
    <Label.formattedText>
        <FormattedString>
            <FormattedString.spans>
                <Span fontSize="16" text="{{working_hours.status}}" color="{{working_hours.statusColor}}" style="font-weight: bold;"></Span>
                <Span fontSize="16" text="{{working_hours.statusText}}"></Span>

                <!-- this works -->
                <Span text="&#xf230;" fontFamily="FontAwesome"></Span>

                <!-- this does not work -->
                <Span fontFamily="FontAwesome" text="{{working_hours.isDailyVisibleSign}}"></Span>
            </FormattedString.spans>
        </FormattedString>
    </Label.formattedText>
</Label>

and I have this code behind:

export function onNavigateTo(args) {
    // ...
    viewModel.set("working_hours", fromObject({
        status: "Open",
        statusColor: "green",
        statusText: " - Closes at 23:00h",
        isDailyVisible: false,
        isDailyVisibleSign: "&#xf106;"
    }));
    //...
    page.bindingContext = viewModel;
}
export function onWorkingHoursDailyViewClick() {
    let workingHours:Observable = <Observable>viewModel.get("working_hours");
    if(workingHours.get("isDailyVisible")) {
        workingHours.set("isDailyVisibleSign", " &#xf106; ");
        workingHours.set("isDailyVisible", false);
    }
    else { 
        workingHours.set("isDailyVisibleSign", " &#xf107; ");
        workingHours.set("isDailyVisible", true);
    }
}

It prints "&#xf106" or "&#xf107" (with semi-colon) instead of font awesome icons... But it works if I do not use binding...

question

Source

clzola

Most helpful comment

Yeah, I have resolved the way you said

clzola on 7 Aug 2017

👍2

All 4 comments

HI @clzola,
Thank you for the attached code snippet,
While using Icon font and changing the icons code from code behind, you should use the String.fromCharCode converter, which will generate a one-letter string from the character. For more info, you could review this part of the documentation. also for further help, I am attaching a sample project.

Archive.zip