CODEWITHSUNDEEP
c#user-interfacexamarinfont-awesome
christinapapaaa11
christinapapaaa11

Reputation: 73

How to Use FontAwesome Icon without Changing Text Font

I'm placing icons in buttons and labels but this is the result:

enter image description here

The icon is displayed but it changes the text. How can I display the icon without changing the text?

<Button x:Name="btnItems" Text="&#xf022; Load Items" FontFamily="{StaticResource FontAwesomeSolid}" />

Upvotes: 0

Views: 578

Answers (3)

Ben
Ben

Reputation: 2985

Button can have Text and one ImageSource with FontImageSource:

ContentLayout sets position and spacing of image relative to text with default values shown in below XAML.

Possible position values are Left, Right, Top, Bottom.

With position values Left or Right text is vertically centered.

With position values Top or Bottom text is horizontally centered.

  <Button Text="fa-list" ContentLayout="Left, 10">
    <Button.ImageSource>
      <FontImageSource Glyph="&#xf022;" FontFamily="{StaticResource FaRegular4}"/>
    </Button.ImageSource>
  </Button>

Label can have one or more Span:

    <Label>
      <Label.FormattedText>
        <FormattedString>
          <Span Text="f0A4 " />
          <Span Text="&#xf0A4;" FontFamily="{StaticResource FaRegular4}" />
          <Span Text=" f0A5 " />
          <Span Text="&#xf0A5;" FontFamily="{StaticResource FaRegular4}" />
        </FormattedString>
      </Label.FormattedText>
    </Label>

Upvotes: 3

nevermore
nevermore

Reputation: 15786

One workaround I can thought is separate the icon and text:

<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" BackgroundColor="Purple">

    <Button Text="&#xf0e2;" FontFamily="FontAwesome" TextColor="White" WidthRequest="25" HorizontalOptions="Center"
           VerticalOptions="Center" />

    <Label Text="Load Items" TextColor="White" WidthRequest="90"
           HorizontalOptions="Center"
           VerticalOptions="Center" />

</StackLayout>

Upvotes: 0

Dr TJ
Dr TJ

Reputation: 3356

I believe the simplest way is to use button Image instead. Download the Icon and add it to your Resources folder in iOS and Drawable in Android. Download image from Fontawesome's website

And then use it in your button like this:

<Button Text="Edit" ImageSource="edit_icon" />

BTW, you need to change the button's font to something else or just leave the default.

Upvotes: 0

Related Questions