Recently I noticed that every time I have to start with a new proof-of-concept I spent too much time searching for icons than writing code. Is that just me?

You might have heard about Font Awesome. Especially, If you are coming from a web development background. In this article I will show you how to use font awesome in mobile project, not just web.

go to font awesome website and click to “start for free”

https://fontawesome.com/

We will select the desktop option to download the font files.

You will need to include .otf files in the Assets folder of your Android and UWP project, and the resouces folder in iOS. (these are customizable if needed)

Be sure you select the corret build action for Android, UWP and iOS. Android must be AndroidAsset, UWP must be Content and iOS must be BundleResource. You can change easly with a right click on the font files.

I renamed my .otf files before include the projects. BrandsRegular400.otf, Regular400.otf, Solid900.otf

Now, you need to include a little bit od code into your iOS info.plist file. Right click on the info.plist and open with XML (text) editor, then paste the below code in dict tags.

    <key>UIAppFonts</key>
    <array>
      <string>BrandsRegular400.otf</string>
      <string>Regular400.otf</string>
      <string>Solid900.otf</string>
    </array>

Now, let’s find the icons we need on the font awesome site.

I’m taking Windows, Android and iOS brand icons.

f17a is Windows unicode. We have to use it with an escape character in xaml.

&#xUNICODE; like this;

There is a Recource Dictionary for font files. Font handlers have to be defined separatly for each platform. So, we have to use the OnPlatform section to include our fonts for every OS.

<OnPlatform x:TypeArguments="x:String" x:Key="Brands">
                    <On Platform="Android" 
          Value="BrandsRegular400.otf#Regular" />
                    <On Platform="iOS" 
          Value="BrandsRegular400" />
                    <On Platform="UWP" 
          Value="/Assets/BrandsRegular400.otf#Font Awesome 5 Brands" />
</OnPlatform>

<Style TargetType="Label">
                    <Setter Property="FontFamily" Value="{StaticResource Brands}" />
                    <Setter Property="FontSize" Value="Large" />
</Style>

You can download full source code on github

There it is. All done. Enjoy your free icons with Font Awesome 🙂