Adding Font Awesome to .NET MAUI App

-

First, download the desktop version of the Font Awesome fonts.

https://fontawesome.com/download

Extract the .OTF files to the project's Resources/Fonts folder. You can rename the files to something easier to type/read, if desired. After copying, check the properties on the files and make sure the Build Action = "MauiFont".

Open the MauiProgram.cs file and add the new fonts to the app builder.

public static class MauiProgram
{
  public static MauiApp CreateMauiApp() {
    var builder = MauiApp.CreateBuilder();
    builder
      .UseMauiApp<App>()
      .ConfigureFonts(fonts => {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        fonts.AddFont("FontAwesome6Brands.otf", "FontAwesomeBrands");
        fonts.AddFont("FontAwesome6Regular.otf", "FontAwesomeRegular");
        fonts.AddFont("FontAwesome6Solid.otf", "FontAwesomeSolid");
      });
    return builder.Build();
  }
}

A helpful task is creating a class that maps the icon glyphs to something easier to read. You can either manually create one, or use a tool to generate one.  https://andreinitescu.github.io/IconFont2Code/ is a live tool that will convert on the fly, but it didn't work for me, so I downloaded a pre-generated class from https://github.com/matthewrdev/fa2cs

In the page XAML, add a namespace reference for your mapping class.

xmlns:coreModels="clr-namespace:Core.Models;assembly=Core"

To use Font Awesome icons in the ContentPage ToolbarItems:

<ContentPage.ToolbarItems>
  <ToolbarItem 
    Text="Save" 
    Clicked="{Binding SaveCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource 
        FontFamily="FontAwesomeSolid"
        Glyph="{x:Static coreModels:FontAwesomeIcons.FloppyDisk}"/>
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
</ContentPage.ToolbarItems>

To use Font Awesome in an element like Label: 

<Label
  Text="{x:Static coreModels:FontAwesomeIcons.FloppyDisk}"
  FontFamily="FontAwesomeRegular" />

Comments

  1. AnonymousApril 30, 2024 at 10:42 PM

    I know this a very old article but I'm really struggling to work out to how use the icons from FontAwesome in my MAUI pages. The first issue is adding the coreModels reference - VS 2022 just says Assembly 'Core' was not found. Is this an assembly of some sort we need to add?

    Also in current MAUI projects the AwesomeFonts are all .ttf not .otf - so again, has something changed?

    Is there any way you could update this for current MAUI projects (as at April 2024)? I need to use a few icons from it and I can't find any resources that show me how to use it in XAML.

    ReplyDelete
  2. AnonymousApril 30, 2024 at 11:57 PM

    OK, don't worry - workerd it out. For anyone else that finds this, here's how I did it:







    I had to add a reference as follows:
    xmlns:fonts="clr-namespace:MyTestApp.App.Resources.Styles"

    ReplyDelete

Post a Comment

Popular posts from this blog

Comparing SELECT Performance of Joining Integers vs GUIDs in SQL Server

-
Image
Overview There are plenty of online conversations and articles asking which makes a better primary key: INT or GUID? There are pros and cons to both, but from my perspective the winner is  INT  by a small margin. As shown in this article , as long as the indexes are maintained to keep fragmentation down the performance is similar, with  INT  slightly ahead in both index size and the speed of CRUD operations. The key is storing the GUID as a UNIQUEIDENTIFIER datatype and never using VARCHAR. Not only is SQL Server less efficient at comparing strings, there's also a chance to run into collation issues comparing across databases. In these discussions, one thing I haven't seen is a comparison of SELECT performance when joining different datatypes. After all, it's rare to find queries that don't stretch across multiple tables in a relational database. I used the StackOverflow2013 database (83 GB size) for testing. Download a copy for yourself from Brent Ozar's  fanta...
Read more

Performance: SQL Server vs MongoDB (JSON data)

-
Anyone reading the title of this post may immediately start to question my sanity and/or competency. After all, SQL is a relational datastore and MongoDB is a document datastore, and wouldn't it just be obvious that a document datastore would be more effective at storing unstructured JSON documents? I have been learning more about NoSQL databases and that's the common wisdom, but I've been around long enough to doubt any hype over any technology. I want to know: how much better? Do the new JSON features in SQL Server 2019 compare well? I wanted to see how both systems perform when the rubber meets the road. Setup To do the comparisons, I'm using DICOM files as the data. The protocol details are too deep to get into here, but they're used in health care to transfer information and images between systems. They are distinct documents, with information stored in tags and sequences, and readily translate to a JSON format . Here's a full example . Updates are not rea...
Read more