Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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));       
    }
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
5.0k views
Welcome To Ask or Share your Answers For Others

1 Answer

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.

enter image description here

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" } });

    }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...