How to add fontAwesome icon to toolbar menu

Question

How can I add a icon(fontAwesome) to my toolbar item? Referring to this link, I managed to set a fontawesome to my label. But how do I do that for toolbar itrm?

My code:

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

I also tried adding icon attribute to my toolbarItem but doesn't work.

score 4 · Answer 1 · edited May 24 '17 at 18:00

4

I have managed to achieve this out-of-box using Iconize library for Xamarin Forms. It is quite easy to set up.

Now, to save you extra hours of frustrations, you need to:

Use IconNavigationPage as parent instead of NavigationPage.
Use IconToolbarItem instead of ToolbarItem.
The Icon property should be set, not the Text property (i.e. Icon="fa-user")

Let me know if this solves your issue.

edited May 24 '17 at 18:00

Kevin

9,309
12
44
51

answered Aug 28 '16 at 14:21

Corneliu Serediuc

404
3
7

score 1 · Answer 2 · answered Oct 25 '19 at 08:03

You can use NavigationPage.TitleView instead of Toolbar or Toolbar item.

All you have to do is just adding fontawesome libraries to each platform and than set font familiy property according of target platform.

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

this is the one of the basic usage. For better usage you can create your own static resources and apply to button or what ever other items.

This is a code sample from one of my project:

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

How to add fontAwesome icon to toolbar menu

2 Answers2