BottomNavigation Icons not shown

Question

On a nativescript vue app, I added a BottomNavigation manually, here a part of the template:

    <StackLayout>
            <BottomNavigation selectedIndex="0">
                <TabStrip>
                    <TabStripItem>
                        <Image src="font://&#xf1ea;" class="far"></Image>
                        <Label text="Start"></Label>
                    </TabStripItem>
                    <TabStripItem>
                        <Label text="Info"></Label>
                    </TabStripItem>                    
                </TabStrip>
                <TabContentItem>

Instead of showing an icon in the BottomNavigation above the text, there is a text like this: &#xf1ea.

If I try to follow the link to the source, it says unable to read file &#xf1ea. Do I have to add a path to the fonts?

As I add the BottomNavigation manually, do I have to add something more?

Thanks for your hints. Juergen

Answer 1

You can add a fontawesome font to your fonts folder then use it with a label.

    <Label  text="" textWrap="true" class=" fas "fontSize="22" />

Label text attribute contains Private Use characters click on icon it self, then copy it

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

You can copy icons by directly clicking on images from https://fontawesome.com/cheatsheet

Click on the icon itself, then copy it.

Nativescript official docs: https://docs.nativescript.org/ui/components/icon-fonts