如何将 fontAwesome 图标添加到工具栏菜单

Question

如何将图标（fontAwesome）添加到我的工具栏项目？ 参考此链接，我设法为我的标签设置了一个 fontawesome。 但是我如何为工具栏 itrm 做到这一点？

我的代码：

ToolbarItem Save = new ToolbarItem();
Save.Text = FontAwesome.FAFloppyO;
Save.Order = ToolbarItemOrder.Primary; 

我也尝试将 icon 属性添加到我的 toolbarItem 但不起作用。

Answer 1

我已经设法使用 Xamarin Forms 的Iconize 库实现了这个开箱即用的功能。 设置起来很容易。

现在，为了节省您额外的沮丧时间，您需要：

1. 使用 IconNavigationPage 作为父级而不是 NavigationPage。
2. 使用 IconToolbarItem 而不是 ToolbarItem。
3. 应该设置 Icon 属性，而不是 Text 属性（即 Icon="fa-user"）

如果这能解决您的问题，请告诉我。

Answer 2

您可以使用NavigationPage.TitleView而不是 Toolbar 或 Toolbar 项。

您所要做的就是将 fontawesome 库添加到每个平台，然后根据目标平台设置字体家族属性。

<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
    <Button HorizontalOptions="EndAndExpand" Text="&#xf03d;">
        <Button.FontFamily>
            <OnPlatform x:TypeArguments="x:String">
                <On Platform="iOS" Value="Font Awesome 5 Free" />
                <On Platform="Android" Value="fa-solid-900.ttf#fa-solid" />
            </OnPlatform>
        </Button.FontFamily>
    </Button>
</StackLayout>

这是基本用法之一。 为了更好地使用，您可以创建自己的静态资源并应用于按钮或其他项目。

这是来自我的一个项目的代码示例：

<!-- Toolbar -->
<NavigationPage.TitleView>
    <Grid  HeightRequest="50" BackgroundColor="{StaticResource DarkBackgroundColor}" Margin="0" Padding="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!-- Title -->
            <Label Text="Inventory" Style="{StaticResource TitleViewTitleLabel}"/>

        <Button Grid.Column="1"  Text="&#xf021;" 
                Style="{StaticResource FontAwesomeButtonRegularTitleViewButton}"
                Command="{Binding SyncDataCommand}"/>
        <Button Grid.Column="2"  Text="&#xf661;"  
                Style="{StaticResource FontAwesomeButtonRegularTitleViewButton}"
                Command="{Binding ShowFunctionalityCommand}"/>
        <Button Grid.Column="3"  Text="&#xf067;" 
                Style="{StaticResource FontAwesomeButtonRegularTitleViewButton}"
                Command="{Binding AddNewInventoryCommand}"/>
    </Grid>
</NavigationPage.TitleView>