FontAwesome Overwriting Regular Text on iOS

Hi all,

I've set up FontAwesome in a Xamarin project, and the icons are appearing on both Android and iOS. Only problem is, it looks like it's working a little too much on iOS. In the attached screenshot, the button should say "Back to Start," but Fontawesome is interpreting "Star" as an icon.

this screenshot

In XAML, I have a placeholder for the buttons:

<StackLayout x:Name="Buttons" Orientation="Vertical" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand" Spacing="50">
</StackLayout>

Here is the code behind:

public SweetAlertPage(SweetAlertViewModel model)
        {
            BindingContext = model;
            InitializeComponent();
            var primaryColor = Application.Current.Resources["PrimaryColor"] as Color?;
            var fontAwesomePath = (OnPlatform<string>)Application.Current.Resources["FontAwesomeSolid"];
            if (model.OkButton != null)
            {
                var okButtonMap = new Button()
                {
                    BackgroundColor = primaryColor ?? Color.Transparent,
                    FontFamily = fontAwesomePath,
                    TextColor = Color.White,
                    FontSize = 22
                };
                okButtonMap.SetBinding(Button.TextProperty, new Binding("OkButton.Text"));
                okButtonMap.SetBinding(Button.CommandProperty, new Binding("OkCommand"));
                Buttons.Children.Add(okButtonMap);
            }
            if (model.CancelButton != null)
            {
                var cancelButtonMap = new Button()
                {
                    BackgroundColor = primaryColor ?? Color.Transparent,
                    FontFamily = fontAwesomePath,
                    TextColor = Color.White,
                    FontSize = 22
                };
                cancelButtonMap.SetBinding(Button.TextProperty, new Binding("CancelButton.Text"));
                cancelButtonMap.SetBinding(Button.CommandProperty, new Binding("CancelCommand"));
                Buttons.Children.Add(cancelButtonMap);
            }
            model.Navigation = Navigation;
        }
    }

I'm guessing that we're seeing this issue because the FontFamily for the entire Button() is FontAwesome. But is there a way to have more than one font on the same Button() element? Or is there an easier fix for this issue?

Thanks for your time.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    It seems the Solid version of FontAwesome will convert some special words to icons you can try the Brand version. I've attached it here.
    And consume it on iOS with the font name: FontAwesome5Brands-Regular

  • stefanhkstefanhk Member ✭✭

    @LandLu said:
    It seems the Solid version of FontAwesome will convert some special words to icons you can try the Brand version. I've attached it here.
    And consume it on iOS with the font name: FontAwesome5Brands-Regular

    Thanks! Unfortunately, this did not work. As far as I know, the FontAwesome Brands library does not have a left arrow icon, which is what we need for the button. If I'm wrong, please let me know what the unicode is for an arrow that works with the brands version.

    I also tried to use FontAwesome Regular, but it was still overwriting text on iOS.

Sign In or Register to comment.