CODEWITHSUNDEEP
c#xamlxamarinxamarin.formsfont-awesome
GotStuckatm
GotStuckatm

Reputation: 111

How to use Font Awesome icons in project as an icon of ImageButton

I am having a problem to realize how to use Font Awesome icons in my Xamarin application, I want to use it with ImageButtonas icon. And most tutorials I found didn't help me understand how it works.

Upvotes: 7

Views: 9445

Answers (2)

Kannan Chithamabaranathan
Kannan Chithamabaranathan

Reputation: 29

FontAwesome have multiple framework supported (Vue, React, Angular, WordPress, LESS, SCSS). But I don't know why they are not providing it for Xamarin Forms and MAUI.

I have created custom control for Xamarin Forms and MAUI.

Instructions are available at https://www.nuget.org/packages/Brushtail.FontAwesome.Mobile/

Feedbacks are welcome.

Upvotes: 0

Cfun
Cfun

Reputation: 9671

As explained in Microsoft Documentation:

  1. You need to first to have the font file I believe .ttf (or .otf).
  2. Add it to your shared project.
  3. Right click on the file and click on "properties", then set it build action to Embedded Resource.
  4. Export it with a friendly alias name in your AssemblyInfo.cs or App.xaml.cs:

[assembly: ExportFont("file-name.ttf", Alias = "FontAwesome")]

  1. Consume it:
<Label FontFamily="FontAwesome" Text="&#xf004;"/>

For the list of icons code take a look at FontAwesome codes.

If you want to use it with click capabilities like a button, then you can use a label with GestureRecognizers:

<Label FontFamily="FontAwesome" Text="&#xf004;">
     <Label.GestureRecognizers>
         <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
     </Label.GestureRecognizers>
</Label>

UPDATE

Even better use an ImageButton with a FontImageSource property instead of a label, you have click capabilities of a button also I found interesting that you can change the color of your glyph icon, weather hard-coded or dynamically depending on the selected theme, here is an example:

<ImageButton>
    <ImageButton.Source>
        <FontImageSource FontFamily="FontAwesome"
                         Glyph="{x:Static fonts:IconFont.AddressBook}"
                         Color="{AppThemeBinding Dark=White,
                                                 Light=Black}"/>
    </ImageButton.Source>
</ImageButton>

You can also define a static class having const string properties, each one having as value the code corresponding to an icon glyph and as name a description of it that way you will need to provide only the description instead of the code like I did with Glyph="{x:Static fonts:IconFont.AddressBook}", it will looks something like this:

 static class IconFont
    {
        public const string Ad = "\uf641";
        public const string AddressBook = "\uf2b9";
...
}

I invite you to follow this video tutorial and check out this GitHub Page which generate the static c# class for you starting from a font glyph file that you submit.

Upvotes: 15

Related Questions