by TsaoShin

Xamarin Tips: Round Button in Xamarin.Forms with Fonts

We can create a simple round buttton with font icon in Xamarin.Forms application like below:

1. Add font family to your shared app as an EmbeddedResource
2. Register the font file with the assembly, in a file such as AssemblyInfo.cs, using the ExportFont attribute.

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
[assembly: ExportFont(“fa-solid-900.ttf”, Alias = “fa-solid”)]

3. Create a resource in App.xaml

<Application.Resources>
<x:String x:Key="IconCheck">&#xf00c;</x:String>
</Application.Resources>

4.Create a button in Page.xaml

<ImageButton VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Lavender" CornerRadius="25" WidthRequest="50" HeightRequest="50">
  <ImageButton.Source>
     <FontImageSource
       FontFamily="fa-solid"
       Glyph="{StaticResource IconCheck}"
       Size="30"
       Color="White" />
   </ImageButton.Source>
</ImageButton>