Search This Blog

Friday 24 July 2020

How to use FontAwesome in Xamarin Forms (Android, iOS, UWP)


Steps
Download the Font Awesome for web from this https://fontawesome.com/ link.
After Downloading the file extract it. 
After extract the zip file copy the selected file(fa-regular400.ttf, fa-solid-900.ttf) to 
Xamarin.Android/Assets
Xamarin.UWP/Assets/Font
Xamarin.iOS/Resources


Configuration for iOS (Info.plist)
Select  Fonts provided by application set it's type as String Array and
mention the all fonts name.

Info.plist

Convert Font to Unicode Representation.
By using this website you can convert font to Unicode.



Adding Unicode To Class files.

Now In Your Xamarin.Form Project Create the FaRegular.cs & FaSolid.cs class File.
  • FaRegular.cs (Paste the fa-regular-400.ttf Unicode format)
  • FaSolid.cs  (Paste the fa-solid-900.ttf Unicode format)

FaRegular.cs (Paste the fa-regular-400.ttf unicode format)
using System;
using System.Collections.Generic;
using System.Text;
 
namespace TestProject.Font
{
    static class FARegular
    {
        public const string Heart = "\uf004";
        public const string Star = "\uf005";
        public const string User = "\uf007";
        public const string Clock = "\uf017";
        public const string ListAlt = "\uf022";
        public const string Flag = "\uf024";
        public const string Bookmark = "\uf02e";
        public const string Image = "\uf03e";
        public const string Edit = "\uf044";
        public const string TimesCircle = "\uf057";
        public const string CheckCircle = "\uf058";
        public const string QuestionCircle = "\uf059";
        public const string Eye = "\uf06e";
        public const string EyeSlash = "\uf070";
        public const string CalendarAlt = "\uf073";
        public const string Comment = "\uf075";
        public const string Folder = "\uf07b";
        public const string FolderOpen = "\uf07c";
        public const string ChartBar = "\uf080";
        public const string Comments = "\uf086";
        public const string StarHalf = "\uf089";
        public const string Lemon = "\uf094";
        public const string CreditCard = "\uf09d";
        public const string Hdd = "\uf0a0";
        public const string HandPointRight = "\uf0a4";
        public const string HandPointLeft = "\uf0a5";
        public const string HandPointUp = "\uf0a6";
        public const string HandPointDown = "\uf0a7";
        public const string Copy = "\uf0c5";
        public const string Save = "\uf0c7";
        public const string Square = "\uf0c8";
        public const string Envelope = "\uf0e0";
        public const string Lightbulb = "\uf0eb";
        public const string Bell = "\uf0f3";
        public const string Hospital = "\uf0f8";
        public const string PlusSquare = "\uf0fe";
        public const string Circle = "\uf111";
        public const string Smile = "\uf118";
        public const string Frown = "\uf119";
        public const string Meh = "\uf11a";
        public const string Keyboard = "\uf11c";
        public const string Calendar = "\uf133";
        public const string PlayCircle = "\uf144";
        public const string MinusSquare = "\uf146";
        public const string CheckSquare = "\uf14a";
        public const string ShareSquare = "\uf14d";
        public const string Compass = "\uf14e";
        public const string CaretSquareDown = "\uf150";
        public const string CaretSquareUp = "\uf151";
        public const string CaretSquareRight = "\uf152";
        public const string File = "\uf15b";
        public const string FileAlt = "\uf15c";
        public const string ThumbsUp = "\uf164";
        public const string ThumbsDown = "\uf165";
        public const string Sun = "\uf185";
        public const string Moon = "\uf186";
        public const string CaretSquareLeft = "\uf191";
        public const string DotCircle = "\uf192";
        public const string Building = "\uf1ad";
        public const string FilePdf = "\uf1c1";
        public const string FileWord = "\uf1c2";
        public const string FileExcel = "\uf1c3";
        public const string FilePowerpoint = "\uf1c4";
        public const string FileImage = "\uf1c5";
        public const string FileArchive = "\uf1c6";
        public const string FileAudio = "\uf1c7";
        public const string FileVideo = "\uf1c8";
        public const string FileCode = "\uf1c9";
        public const string LifeRing = "\uf1cd";
        public const string PaperPlane = "\uf1d8";
        public const string Futbol = "\uf1e3";
        public const string Newspaper = "\uf1ea";
        public const string BellSlash = "\uf1f6";
        public const string Copyright = "\uf1f9";
        public const string ClosedCaptioning = "\uf20a";
        public const string ObjectGroup = "\uf247";
        public const string ObjectUngroup = "\uf248";
        public const string StickyNote = "\uf249";
        public const string Clone = "\uf24d";
        public const string Hourglass = "\uf254";
        public const string HandRock = "\uf255";
        public const string HandPaper = "\uf256";
        public const string HandScissors = "\uf257";
        public const string HandLizard = "\uf258";
        public const string HandSpock = "\uf259";
        public const string HandPointer = "\uf25a";
        public const string HandPeace = "\uf25b";
        public const string Registered = "\uf25d";
        public const string CalendarPlus = "\uf271";
        public const string CalendarMinus = "\uf272";
        public const string CalendarTimes = "\uf273";
        public const string CalendarCheck = "\uf274";
        public const string Map = "\uf279";
        public const string CommentAlt = "\uf27a";
        public const string PauseCircle = "\uf28b";
        public const string StopCircle = "\uf28d";
        public const string Handshake = "\uf2b5";
        public const string EnvelopeOpen = "\uf2b6";
        public const string AddressBook = "\uf2b9";
        public const string AddressCard = "\uf2bb";
        public const string UserCircle = "\uf2bd";
        public const string IdBadge = "\uf2c1";
        public const string IdCard = "\uf2c2";
        public const string WindowMaximize = "\uf2d0";
        public const string WindowMinimize = "\uf2d1";
        public const string WindowRestore = "\uf2d2";
        public const string Snowflake = "\uf2dc";
        public const string TrashAlt = "\uf2ed";
        public const string Images = "\uf302";
        public const string Clipboard = "\uf328";
        public const string ArrowAltCircleDown = "\uf358";
        public const string ArrowAltCircleLeft = "\uf359";
        public const string ArrowAltCircleRight = "\uf35a";
        public const string ArrowAltCircleUp = "\uf35b";
        public const string Gem = "\uf3a5";
        public const string MoneyBillAlt = "\uf3d1";
        public const string WindowClose = "\uf410";
        public const string CommentDots = "\uf4ad";
        public const string SmileWink = "\uf4da";
        public const string Angry = "\uf556";
        public const string Dizzy = "\uf567";
        public const string Flushed = "\uf579";
        public const string FrownOpen = "\uf57a";
        public const string Grimace = "\uf57f";
        public const string Grin = "\uf580";
        public const string GrinAlt = "\uf581";
        public const string GrinBeam = "\uf582";
        public const string GrinBeamSweat = "\uf583";
        public const string GrinHearts = "\uf584";
        public const string GrinSquint = "\uf585";
        public const string GrinSquintTears = "\uf586";
        public const string GrinStars = "\uf587";
        public const string GrinTears = "\uf588";
        public const string GrinTongue = "\uf589";
        public const string GrinTongueSquint = "\uf58a";
        public const string GrinTongueWink = "\uf58b";
        public const string GrinWink = "\uf58c";
        public const string Kiss = "\uf596";
        public const string KissBeam = "\uf597";
        public const string KissWinkHeart = "\uf598";
        public const string Laugh = "\uf599";
        public const string LaughBeam = "\uf59a";
        public const string LaughSquint = "\uf59b";
        public const string LaughWink = "\uf59c";
        public const string MehBlank = "\uf5a4";
        public const string MehRollingEyes = "\uf5a5";
        public const string SadCry = "\uf5b3";
        public const string SadTear = "\uf5b4";
        public const string SmileBeam = "\uf5b8";
        public const string Surprise = "\uf5c2";
        public const string Tired = "\uf5c8";
    }
}
FaSolid.cs (Paste the fa-solid-900.ttf unicode format)

Static Resource
Now Create the Static Resource in App.xaml file.

App.xaml
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="TestProject.App">
    <Application.Resources>
        <OnPlatform x:Key="FARegularFont" x:TypeArguments="x:String">
            <On Platform="iOS" Value="Font Awesome 5 Free" />
            <On Platform="Android" Value="fa-regular-400.ttf#Font Awesome 5 Free" />
<On Platform="UWP" Value="Assets/Fonts/fa-regular-400.ttf#Font Awesome 5 Free" />
</OnPlatform> <OnPlatform x:Key="FASolidFont" x:TypeArguments="x:String"> <On Platform="iOS" Value="FontAwesome5Free-Solid" />
<On Platform="Android" Value="fa-solid-900.ttf#FontAwesome5Free-Solid" />
<On Platform="UWP" Value="Assets/Fonts/fa-solid-900.ttf#FontAwesome5Free-Solid" />
</OnPlatform> </Application.Resources> </Application>
Note : For Android, UWP you need to set Value = fontname.ttf#FontFamilyName but for iOS you need to set Value as Font Family Name.
How to get Font Family Name in iOS.
AppDelegate.cs
Use this code in FinishLaunching mehtod to get font family name.
 public override bool FinishedLaunching(UIApplication app, NSDictionary options)
 {
            Rg.Plugins.Popup.Popup.Init();
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());
 
            // to get family Name
           foreach (var familyNames in UIFont.FamilyNames.Where(f => f.StartsWith("Ko")))
           {
              foreach (var familyName in UIFont.FontNamesForFamilyName(familyNames))
              {
                 Console.WriteLine(familyName);
              }
           }
return base.FinishedLaunching(app, options); }
You will get output like this.


Now use this font Family Name in App.xaml Static Resource.
<On Platform="iOS" Value="Font Awesome 5 Free" /> for fa-regular-400.ttf
<On Platform="iOS" Value="FontAwesome5Free-Solid" /> for fa-solid-900.ttf
Implementations.

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:local="clr-namespace:TestProject.Font"
             x:Class="TestProject.MainPage">
 
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,0,0,0" Margin="5">
        <!-- Place new controls here -->
        <Label Text="Font Awesome Regular Font" FontSize="Large" FontAttributes="Bold" HorizontalOptions="CenterAndExpand" />
        <Label Text="Address Book" />
        <Label Text="{x:Static local:FaRegular.AddressBook}"  FontSize="20" FontFamily="{StaticResource FARegularFont}"  />
 
        <Label Text="User" />
        <Label Text="{x:Static local:FaRegular.User}"  FontSize="20" FontFamily="{StaticResource FARegularFont}"  />
 
        <Label Text="Font Awesome Solid Font" FontSize="Large" FontAttributes="Bold" HorizontalOptions="CenterAndExpand" />
 
        <Label Text="Address Book" />
        <Label Text="{x:Static local:FASolid.AddressBook}"  FontSize="20" FontFamily="{StaticResource FASolidFont}"  />
 
        <Label Text="User" />
        <Label Text="{x:Static local:FASolid.User}"  FontSize="20" FontFamily="{StaticResource FASolidFont}"  />
    </StackLayout>
</ContentPage>
 

Note:
xmlns:local="clr-namespace:TestProject.Font"
This will point to FaRegular.cs class & FaSolid.cs class that stored in TestProject/Font folder.

FontFamily="{StaticResource FARegularFont}"
This is the Key name of Static Resource Created in App.xaml


I am using FontAwesome 5 & Xamarin Form 4.5. 

Popular Posts