How can I display a font awesome glyph in XAML/C#

Question

I have tried many things in Visual Studio, but I still can not display a glyph.

1. Do I need to add a NuGet package? Which?
2. Do I need a 'using ...;' in C#?
3. Do I need a 'xmlns:...' in XAML?
4. Should I display it with a "Label"?

I know in HTML, you just add a class to your element. But I am stumped in XAML. (It's cross-platform, right?)

This should a simple thing but I can not get any answers to function. Please provide an answer if you can do this and answer all points.

Answer 1

There is a correct plugin for Xamarin.Forms. This plugin not only has FontAwesome Font.

According to this example in github you must do the following:

<StackLayout Orientation="Horizontal">
        <iconize:IconLabel FontSize="20" Text="{Binding Key}" TextColor="Green" VerticalTextAlignment="Center" />
</StackLayout>

[UPDATE]

On request from user3247130 I leave the complete example:

From Visual Studio or Xamarin Studio, install the following packages:

• Xam.Plugin.Iconize
• Xam.Plugin.Iconize.FontSwesome
• Xam.FormsPlugin.Iconize

In the Android project, MainActivity class, OnCreate() method add:

FormsPlugin.Iconize.Droid.IconControls.Init(Resource.Id.toolbar);
Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());

In the iOS project, AppDelegate class, FinishedLaunching() method, add similar lines:

FormsPlugin.Iconize.iOS.IconControls.Init();
Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());

Also, in iOS project, info.plist add

<key>UIAppFonts</key>
<array>     
    <string>iconize-fontawesome.ttf</string>
</array>

Now, in your XAML where your have your toolbar, in tag, add

<ContentPage ...
xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize">

and

<iconize:IconLabel Text="fa-search"  />

[UPDATE 2]

This plugin has an issue on UWP platform. To run this plugin on UWP platform follow these steps:

First, create a folder called Plugin.Iconize.FontAwesome.UWP into %userprofile%\.nuget\packages\xam.plugin.iconize.fontawesome‌​\2.0.0.29-beta\lib\U‌​AP10\

Second, create another folder called Assets into Plugin.Iconize.FontAwesome.UWP folder

Third create anoother folder called Fonts into Assets folder

And finally copy iconize-fontawesome.ttf file (you shouldn't change their name).

Additionally, you have to add a Fonts folder in the Assets folder in your UWP project and then paste the same ttf file

This is not necessary on Android or iOS it is only a issue of the UWP platform

Answer 2

Try Plugin.Glypher it has Font Awesome 5 Free/Pro and WeatherIcons support.

• Plugin.Glypher.FontAwesome5Free
• Plugin.Glypher.FontAwesome5Pro
• Plugin.Glypher.WeatherIcons

xmlns:fontAwesome5Free="clr-namespace:Plugin.Glypher.FontAwesome5Free;assembly=Plugin.Glypher.FontAwesome5Free"
xmlns:glypher="clr-namespace:Plugin.Glypher;assembly=Plugin.Glypher"

<Label glypher:FontGlyph.Glyph="{x:Static fontAwesome5Free:GlyphList.Fab_Bluetooth}"
       FontSize="Large"
       TextColor="CornflowerBlue" />

<Button glypher:FontGlyph.Glyph="{x:Static fontAwesome5Free:GlyphList.Fab_Bitcoin}"
        FontSize="Large"
        TextColor="IndianRed" />

<Image>
    <Image.Source>
        <FontImageSource Size="32" 
                         Color="Orange" 
                         glypher:FontGlyph.Glyph="{x:Static fontAwesome5Free:GlyphList.Far_Bell_Slash}" />
    </Image.Source>
</Image>

It's all in shared code. But it depends on Xamarin.Forms (>= 3.6.0.344457)