Font awesome icon in Xamarin forms.

BhautikBhautik Member ✭✭✭

How to use font awesome icon with button and other control in xamarin forms?
Thanks in Advance.

Answers

  • MazidiMazidi Member ✭✭

    See step by step article by Doumer, for Xamarin Forms without any platform specific code

    doumer.me/icons-with-font-awesome-5-xamarin-forms/

  • SolomonFriedSolomonFried USMember ✭✭
    edited September 2018

    I have been using this approach which is based on information I believe came from somewhere on this forum.

    I created a new .NET Standard project containing the following 2 files; A Xaml file called FontFileResources.xaml with a backing .cs file.

    (For a while I was using Styles for Labels, but for reasons I cannot recall, I have abandoned that. The Styles remain in the code in case I decide to use them in the future, but they can be removed if you will not use it)

    **NOTE: **On each platform, copy the fontawesome fontfile to the directory in the elements, as shown in the XAML below.

    <?xml version="1.0" encoding="UTF-8"?>
    <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="FontNameResources.FontFileResources">
        <OnPlatform x:Key="FontAwesomeRegularId" x:TypeArguments="x:String">
            <On Platform="iOS" Value="Font Awesome 5 Pro" />
            <On Platform="Android" Value="fonts/Font Awesome 5 Pro-Regular-400.otf#Font Awesome 5 Pro" />
            <On Platform="UWP, WinRT, WinPhone" Value="Assets/Fonts/Font Awesome 5 Pro-Regular-400.otf#Font Awesome 5 Pro" />
        </OnPlatform>
        <Style x:Key="FontAwesomeRegular" TargetType="Label">
            <Setter Property="FontFamily" Value="{StaticResource FontAwesomeRegularId}" />
        </Style>
    
        <OnPlatform x:Key="FontAwesomeSolidId" x:TypeArguments="x:String">
            <On Platform="iOS" Value="Font Awesome 5 Pro Solid" />
            <On Platform="Android" Value="fonts/Font Awesome 5 Pro-Solid-900.otf#Font Awesome 5 Pro Solid" />
            <On Platform="UWP, WinRT, WinPhone" Value="Assets/Fonts/Font Awesome 5 Pro-Solid-900.otf#Font Awesome 5 Pro Solid" />
        </OnPlatform>
        <Style x:Key="FontAwesomeSolid" TargetType="Label">
            <Setter Property="FontFamily" Value="{StaticResource FontAwesomeSolidId}" />
        </Style>
    </ResourceDictionary>
    

    And the Code file....

        using System.Linq;
        using Xamarin.Forms;
        using Xamarin.Forms.Xaml;
    
        namespace FontNameResources
        {
            [XamlCompilation(XamlCompilationOptions.Compile)]
            public partial class FontFileResources : ResourceDictionary
            {
    
                private static readonly FontFileResources _instance = new FontFileResources();
                public FontFileResources()
                {
                    InitializeComponent();
                }
    
                public static string FontAwesomeRegular => _instance.GetStringResourceForPlatform("FontAwesomeRegularId");
                public static string FontAwesomeSolid => _instance.GetStringResourceForPlatform("FontAwesomeSolidId");
    
                private string GetStringResourceForPlatform(string resourceKey)
                {
                    if (!_instance.ContainsKey(resourceKey)) return null;
    
                    if (!(_instance[resourceKey] is OnPlatform<string> resource)) return string.Empty;
    
                    var retString = resource.Platforms.Where(c => c.Platform.Contains(Device.RuntimePlatform))
                        .Select(c => c.Value).FirstOrDefault() as string;
    
                    return retString ?? "NOFONT";
                }
    
            }
        }
    

    I include this project in any project that needs to use a custom font.

    In the XAML where the font will be used I add the following xml namespace

    xmlns:fn="clr-namespace:FontNameResources;assembly=FontNameResources"

    Then at the Label/Button/etc... where I am using a symbol from fontawesome, I add the following

        FontFamily="{x:Static fn:FontFileResources.FontAwesomeRegular}" 
        Text="&#xf00c;"  // Enter the Glyph value here
    

    Additionally I also have a class of const strings which I reference for Glyphs instead of using the values.

     public class GlyphNames
        {
            public const string ExpandGlyph = "\uF065";
            public const string ContractGlyph = "\uF066";
       }
    

    So it would look something like

    <Label Text="{x:Static glyphs:GlyphNames.ExpandGlyph}" />

    As an aside. In order to lighten the size of my application, I have been using a Font editor (I use FontCreator from https://www.high-logic.com/). I then create an application-specific font file and copy to it (copy/paste) any fonts from fontawesome that I need for my app. My FontFile is cut to under 30K. Needless to say, I have a full purchased license of Fontawesome.

    Hope this helps.

  • Felix.xFelix.x USMember ✭✭

    http://www.fifthstreetpartners.com/using-fontawesome-5-in-xamarin-forms/

    Use any ttf and Xamarin.Forms code only (no custom renderer)

  • Use the class from this url: github .com/ fzany/Font-Awesome-Cheat-Charp . fix the link by removing spaces

    public class FontAwesome
    {
    public static class Solid
    {
    public static string Ad = "\uf641";
    public static string Address_Book = "\uf2b9";
    public static string Address_Card = "\uf2bb";
    public static string Adjust = "\uf042";
    public static string Air_Freshener = "\uf5d0";
    public static string Align_Center = "\uf037";
    public static string Align_Justify = "\uf039";
    public static string Align_Left = "\uf036";
    public static string Align_Right = "\uf038";
    public static string Allergies = "\uf461";
    public static string Ambulance = "\uf0f9";
    public static string American_Sign_Language_Interpreting = "\uf2a3";
    public static string Anchor = "\uf13d";
    public static string Angle_Double_Down = "\uf103";
    public static string Angle_Double_Left = "\uf100";
    public static string Angle_Double_Right = "\uf101";
    public static string Angle_Double_Up = "\uf102";
    public static string Angle_Down = "\uf107";
    public static string Angle_Left = "\uf104";
    public static string Angle_Right = "\uf105";

  • igorkr_10igorkr_10 Member ✭✭✭

    You don't need any custom renderers. Just use custom font as me: https://forums.xamarin.com/discussion/comment/350244/#Comment_350244

  • LearnEverythingLearnEverything USMember ✭✭✭
    edited October 11

    Its better.. that all resources are embedded with library, we do not need to add files to each platform folder like this font awesome. to make life easier and get rid of calling initialize every plugin we install and make our code cleaner. Like VS Code.

    using System;
    using System.Collections.Generic;
    using System.Text;
    using Xamarin.Forms;
    
    namespace Xamarin.FontAwesome
    {
        public class FontAwesomeView : Label
        {        
            public FontAwesomeView() : base()
            {
    
            }
            public FontAwesomeType FontAwesomeType
            {
                get { return (FontAwesomeType)base.GetValue(FontAwesomeTypeProperty); }
                set { base.SetValue(FontAwesomeTypeProperty, value); }
            }
            public static BindableProperty FontAwesomeTypeProperty = BindableProperty.Create(
                                                            propertyName: "FontAwesomeType",
                                                            returnType: typeof(FontAwesomeType),
                                                            declaringType: typeof(FontAwesomeView),
                                                            defaultValue: Xamarin.FontAwesome.FontAwesomeType.FontAwesomeRegular,
                                                            defaultBindingMode: BindingMode.TwoWay,
                                                            propertyChanged: FontAwesomeTypePropertyChanged);
    
            private static void FontAwesomeTypePropertyChanged(BindableObject bindable, object oldValue, object newValue)
            {
                var control = (FontAwesomeView)bindable;
                var fontType = (Xamarin.FontAwesome.FontAwesomeType)newValue;
                control.UpdatePlatform();
            }
    
            /// <summary>
            /// No need to add fontawesome to each platform, it is already embedded with class library.
            /// </summary>
            private void UpdatePlatform()
            {
                if (this.FontAwesomeType == FontAwesomeType.FontAwesomeRegular)
                    this.FontFamily = "Xamarin.FontAwesome.Resources.Fonts.FontAwesome5Regular.otf";
                else if(this.FontAwesomeType == FontAwesomeType.FontAwesomeBrands)
                    this.FontFamily = "Xamarin.FontAwesome.Resources.Fonts.FontAwesome5Brands.otf";
                else if(this.FontAwesomeType == FontAwesomeType.FontAwesomeSolid)
                    this.FontFamily = "Xamarin.FontAwesome.Resources.Fonts.FontAwesome5Solid.otf";
            }
        }
        public enum FontAwesomeType
        {
            FontAwesomeBrands,
            FontAwesomeSolid,
            FontAwesomeRegular,
        }
    }
    
    

    More Info
    https://baskren.github.io/Forms9Patch/index.html

  • LearnEverythingLearnEverything USMember ✭✭✭
    edited October 11

    Font file reader (import existing .ttf files)
    https://microsoft.com/store/productId/9WZDNCRDXF41

  • sucharithasucharitha Member ✭✭

    Hello everyone
    "Click \ue701 to add new friend" is my sentence and getting this from resource file (translations) but when im binding it
    example : Text="{i18n:Translate Key}" /> (where Key = "Click \ue701 to add new friend")
    Its not working.
    Can Anyone pls help me in finding a solution for this.
    Thank you.

Sign In or Register to comment.