底部导航图标不显示

Question

在 nativescript vue 应用程序上，我手动添加了一个 BottomNavigation，这里是模板的一部分：

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

文本上方的 BottomNavigation 中没有显示图标，而是显示如下文本：.

如果我尝试按照 link 找到源代码，它说无法读取文件 。我必须添加字体路径吗？

当我手动添加 BottomNavigation 时，是否还需要添加更多内容？

感谢您的提示。于尔根

Answer 1

您可以将 fontawesome 字体添加到 fonts 文件夹，然后将其与标签一起使用。

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

标签文字属性包含Private Use characters自己点击图标，然后复制

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

您可以通过直接点击来自https://fontawesome.com/cheatsheet

的图片来复制图标

点击图标本身，然后复制它。

Nativescript官方文档： https://docs.nativescript.org/ui/components/icon-fonts

底部导航图标不显示

BottomNavigation Icons not shown

nativescript-vue