Use Font Awesome icons in .NET MAUI
It is very important when developing an application to use icons, icons are better than texts and can be used in images, texts and buttons, in this tutorial we will learn how to use Font Awesome icons in a .NET MAUI app
you can watch the video tutorial
Download font awesome icons
- Go to https://fontawesome.com/download
- Click on button free for desktop to download icon files
- Right click on zip file and choose extract here
Create .NET MAUI new app
- Open visual studio
- Click on create new project
- Choose .NET MAUI App then next
- Enter project name and choose location and next then create
Add FontAwesome icons files to project
- Select all files then right click copy
- Go to visual studio
- Open resources folder then open Fonts Folder
- Paste the files we copied before
- Open MauiProgram class to configure icons
- Using fonts.AddFont function to add icon files it take two parameters file name and alias to call file by it As it is shown in the picture
fonts.AddFont("Brands-Regular-400.otf", "FAB"); fonts.AddFont("Free-Regular-400.otf", "FAR"); fonts.AddFont("Free-Solid-900.otf", "FAS");
Using icons
- Open MainPage delete VerticalStackLayout and behind code
- Add stacklayout
Using icon by Unicode
- Search for any icon
- Copy icon Unicode
- Add ContentPage.resources tag and add x:string tag give key name with X:key and inside the tag put Unicode between this characters like this 
<ContentPage.Resources> <x:String x:Key="smile"></x:String> </ContentPage.Resources>
Using icon with image
- Add image tag and enter height , width
- Inside image tag add image.source tag
- Inside image.sourse tag add FontImageSource tag , give FontFamily attribute value FAS alias name for icon file , give Glyph attribute value of resources key , we added in content resources before
- You can change icon size from Size attribute
Using icon with image
- Add image button tag and enter height , width
- Inside image button tag add imagebutton.source tag
- Inside imagebutton.sourse tag add FontImageSource tag , give FontFamily attribute value FAS alias name for icon file , give Glyph attribute value of resources key , we added in content resources before
- You can change icon size from Size attribute
Using icon with label
- Add label tag ,give FontFamily attribute value FAS alias name for icon file , give Text attribute value of resources key , we added in content resources before
- You can change icon size use FontSize Attribute
<!--image--> <Image WidthRequest="100" HeightRequest="100"> <Image.Source> <FontImageSource FontFamily="FAS" Glyph="{StaticResource smile}" Color="Blue" Size="50"/> </Image.Source> </Image> <!--ImageButton--> <ImageButton HeightRequest="100" WidthRequest="100"> <ImageButton.Source> <FontImageSource FontFamily="FAS" Glyph="{StaticResource smile}" Color="White" Size="50"/> </ImageButton.Source> </ImageButton> <!--Label--> <Label FontFamily="FAS" Text="{StaticResource smile}" FontSize="100" TextColor="Red" HorizontalTextAlignment="Center"/>
Using icon by Unicode from c#
There won't be many edits
- Go to MainPage.cs
- Add property give it icon name
- In the constructor initialize property with value \uf118
- Add \u + Unicode
- Give BindingContext value with this to bind MainPage.cs is the binding context
- Copy Image , ImageButton , Label tags then paste them
- Change "StaticResource" to "Binding" to get icon from property in MainPage.cs
public string smile { get; set; } public MainPage() { InitializeComponent(); smile = "\uf118"; BindingContext = this }
<!--image--> <Image WidthRequest="100" HeightRequest="100"> <Image.Source> <FontImageSource FontFamily="FAS" Glyph="{Binding smile}" Color="Blue" Size="50"/> </Image.Source> </Image> <!--ImageButton--> <ImageButton HeightRequest="100" WidthRequest="100"> <ImageButton.Source> <FontImageSource FontFamily="FAS" Glyph="{Binding smile}" Color="White" Size="50"/> </ImageButton.Source> </ImageButton> <!--Label--> <Label FontFamily="FAS" Text="{Binding smile}" FontSize="100" TextColor="Red" HorizontalTextAlignment="Center"/>
Using FontAwesome helper
FontAwesome helper is a static class contains all FontAwesome icons as properties This saves you from having to write all these properties manually, I used a free tool to convert the icons file into properties that can be used from here https://andreinitescu.github.io/IconFont2Code/
How to use this helper
- First add new folder name it with helpers inside this folder create a new class name it FontAwesomeHelper and don’t forget to make it static
- Copy properties from my class from here
- Paste it in your class
- In MainPage add namespace refrence to helpers folder
- Copy Image , ImageButton , Label tags then paste them
- For Glyph on Image , ImageButton and Text For Label you will changes values to this attributes to {X:Static helper:FontAwesomHelper.FaceSmile} you can try to write any icon name , this will be easy Because autocomplete works
<!--image--> <Image WidthRequest="100" HeightRequest="100"> <Image.Source> <FontImageSource FontFamily="FAS" Glyph="{x:Static helper:FontAwesomeHelper.FaceSmile}" Color="Blue" Size="50"/> </Image.Source> </Image> <!--ImageButton--> <ImageButton HeightRequest="100" WidthRequest="100"> <ImageButton.Source> <FontImageSource FontFamily="FAS" Glyph="{x:Static helper:FontAwesomeHelper.FaceSmile}" Color="White" Size="50"/> </ImageButton.Source> </ImageButton> <!--Label--> <Label FontFamily="FAS" Text="{x:Static helper:FontAwesomeHelper.FaceSmile}" FontSize="100" TextColor="Red" HorizontalTextAlignment="Center"/>
See source code on Github