How to add font icon in toolbar item in xamarin forms

Question

I have using navigation page in my application. I have to set font icon to toolbar item. But it shows cross symbol because i have not set the font family. So anyone suggest me to set font icon in toolbar item is possible or not.

Honky

Showing code will allow people to help you. – Dillman

#26133000 – Dillman

Answer 1

With Xamarin Forms 4.x (if I remember the version correctly) they have add a FontImageSource type that can be used on ToolbarItems. A few things you need to do...

Add the font files to your platform projects. On Android, add them in the Assets folder with build action set to AndroidAsset. On iOS, add them in the Resources folder with build action set to BundleResource. Also on iOS, edit your info.plist and add

<key>UIAppFonts</key>
<array>
    <string>fontname.ttf</string>
    <string>fontname2.ttf</string>
    ...
</array>

Now Xamarin is able to use the fonts.

I defined some application resources to easily load fonts:

<OnPlatform x:Key="FontAwesomeLightFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-light-300.ttf#Font Awesome 5 Pro Light" />
  <On Platform="iOS" Value="FontAwesome5Pro-Light" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeRegularFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-regular-400.ttf#FontAwesome5ProRegular" />
  <On Platform="iOS" Value="FontAwesome5ProRegular" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeSolidFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-solid-900.ttf#FontAwesome5ProSolid" />
  <On Platform="iOS" Value="FontAwesome5ProSolid" />
</OnPlatform>

That is sitting in a resource dictionary that is merged into App.xaml resources.

Now, when I want to use a font icon as a toolbar icon imagesource, I can do the following:

<Page.ToolbarItems>
  <ToolbarItem Command="{Binding SomeCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
        Glyph="{x:Static fonts:FontAwesomeIcon.Cog}"
        Size="{StaticResource ToolbarIconImageSourceSize}" />
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
</Page.ToolbarItems>

If you want a static class to define glyph icons as opposed to having to enter the unicode (my FontAwesomeIcon class used in glyph above), there is a great tool at https://andreinitescu.github.io/IconFont2Code/ that will generate a C# static class based on an uploaded font file. It ends up looking like

public static class FontAwesomeIcon
{
  public const string Abacus = "\uf640";
  public const string Ad = "\uf641";
  public const string AddressBook = "\uf2b9";
  public const string AddressCard = "\uf2bb";
  public const string Adjust = "\uf042";
  public const string AirFreshener = "\uf5d0";
  ...
}

Tightrope

Answer 2

<ContentPage.ToolbarItems>
    <ToolbarItem Order="Primary" Command="{Binding ExportDocumentCommand}">
        <ToolbarItem.IconImageSource>
            <FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Size="Subtitle" 
                Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}" />
        </ToolbarItem.IconImageSource>
    </ToolbarItem>
</ContentPage.ToolbarItems>

in app.xaml

<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolid">
    <On Platform="iOS" Value="FontAwesome5Free-Solid" />
    <On Platform="Android" Value="Fonts/FontAwesome5Solid.otf#Regular" />
    <On Platform="UWP" Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>

for work this line "Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}"" you need add on page
xmlns:fontawesome="clr-namespace:YourProjectName.Styles" and add class from GitHub

Peruse

Answer 3

You can try to use FontAwesome First,we need to go to website: https://fontawesome.com/ to get vector icons and social logos on website with Font Awesome. After we download the font and put it in our app, we can use it flexibly.

Here is a demo you can check it. The main code is as follows:

App.xaml

 <?xml version="1.0" encoding="utf-8" ?>
 <Application xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="MyFontApp.App">
<Application.Resources>
    <ResourceDictionary>
        <OnPlatform x:TypeArguments="x:String" 
            x:Key="FontAwesomeBrands">
            <On Platform="Android" 
      Value="FontAwesome5Brands.otf#Regular" />
            <On Platform="iOS" 
      Value="FontAwesome5Brands-Regular" />
            <On Platform="UWP" 
      Value="/Assets/FontAwesome5Brands.otf#Font Awesome 5 Brands" />
        </OnPlatform>

        <OnPlatform x:TypeArguments="x:String" 
            x:Key="FontAwesomeSolid">
            <On Platform="Android" 
      Value="FontAwesome5Solid.otf#Regular" />
            <On Platform="iOS" 
      Value="FontAwesome5Free-Solid" />
            <On Platform="UWP" 
      Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
        </OnPlatform>

        <OnPlatform x:TypeArguments="x:String" 
            x:Key="FontAwesomeRegular">
            <On Platform="Android" 
      Value="FontAwesome5Regular.otf#Regular" />
            <On Platform="iOS" 
      Value="FontAwesome5Free-Regular" />
            <On Platform="UWP" 
      Value="/Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
        </OnPlatform>
    </ResourceDictionary>
  </Application.Resources>

class FontAwesomeIcons

 namespace MyFontApp.Utils
 {
    public static partial class FontAwesomeIcons
    {
        public const string FiveHundredPX = "\uf26e";

        public const string Abacus = "\uf640";

        public const string AccessibleIcon = "\uf368";

        // other font icon codes
   }
   }

And we use like this:

    <NavigationPage.TitleView  >
    <StackLayout Orientation="Horizontal"  HorizontalOptions="CenterAndExpand">
        <Label   Text="{x:Static Utils:FontAwesomeIcons.Map}"
                 FontFamily="{StaticResource FontAwesomeSolid}"/>

        <Button   Text="{x:Static Utils:FontAwesomeIcons.Anchor}"
                 FontFamily="{StaticResource FontAwesomeSolid}"/>
    </StackLayout>

</NavigationPage.TitleView>

The result is:

You can review the full demo here.

For more details, you can check: https://medium.com/@tsjdevapps/use-fontawesome-in-a-xamarin-forms-app-2edf25311db4

Anterior