xamarin.forms - Use font awesome icon for tabbed page tabs

Question

This is how I add tabs to a tabbed page. I have Font awesome icons working at various places in my app. How do I add icons to my tabs, since I add tabs in the code behind like this:

public partial class MainTabbedPage : TabbedPage
{
    public MainTabbedPage(SelectedItem item)
    {
        InitializeComponent();
        var summaryPage = new DeviceSummaryPage(item);

        Children.Add(summaryPage);
        Children.Add(new DeviceSettingsPage(item));
        Children.Add(new FirmwarePage(item));       
    }
}

Answer 1

How do I add icons to my tabs

First, you need to copy the fonts to the platform-specific projects:

1. on Android into the Assets folder with Build Action AndroidAsset,
2. on iOS into the Resources folder with the Build Action BundleResource,
3. on UWP into the Assets folder with Build Action Content.

Note:On iOS, a change to the Info.plist file is required so that the added fonts can also be used.

The png is on Android Platform.

In order to be able to use the fonts, creat ResourceDictionary in App.xaml

<ResourceDictionary>
        <OnPlatform x:Key="FontAwesomeBrands" x:TypeArguments="x:String">
            <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:Key="FontAwesomeSolid" x:TypeArguments="x:String">
            <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:Key="FontAwesomeRegular" x:TypeArguments="x:String">
            <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>

Create a FontImageSource object and set the values accordingly then pass this object to the IconImageSource of your ContentPage.

  public TabbedPage1()
    {
        InitializeComponent();
        var solidFontFamily = Application.Current.Resources["FontAwesomeSolid"] as OnPlatform<string>;
        var RegularFontFamily = Application.Current.Resources["FontAwesomeRegular"] as OnPlatform<string>;


        Children.Add(new simplecontrol.Page1() { IconImageSource=new FontImageSource() { FontFamily = RegularFontFamily, Glyph = "uf108" } });
        Children.Add(new simplecontrol.Page3() { IconImageSource = new FontImageSource() { FontFamily = solidFontFamily, Glyph = "uf108" } });

    }