Thursday, November 1, 2018

Implementation of Font awesome


Introduction

Image result for font awesome


    Hello All Today we will understand how to add icon or images with help of font 
awesome.Font awesome is a font family which is to be add in project for get font awesome icons.
     Font awesome is a font family which is change the Combination of letters in way that are become icons.   

Steps

1.  Download the .otf Files.You can find both free and pro files here.

2.  Unzip these files and add these files in Projects in follow location:                       Droid: Demo.droid > Assets                                                                           iOS:Demo.iOS > Resources

3. Add All the .otf Files name which add in iOS project in info.plist.

<key>UIAppFonts</key>
<array>
<string>Font Awesome 5 Free-Regular-400.otf</string>
<string>Font Awesome 5 Free-Solid-900.otf</string>
<string>Font Awesome 5 Brands-Regular-400.otf</string>
</array>

4. Add these code in your Resource directory:

<OnPlatform 

x:Key="AwesomeFontFamily"

x:TypeArguments="x:String"

Android="Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free Regular" 

iOS="FontAwesome5FreeRegular" />


<OnPlatform 
x:Key="AwesomeSolidFontFamily"
x:TypeArguments="x:String"
Android="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" 
iOS="FontAwesome5FreeSolid" />

<OnPlatform 
x:Key="AwesomeBrandsFontFamily"
x:TypeArguments="x:String"a
Android="Font Awesome 5 Brands-Regular-400.otf#Font Awesome 5 Brands Regular" 
iOS="FontAwesome5BrandsRegular" />



Mainly,There are different techniques to use font awesome family in Android and iOS.
In android,first write the otf file name then font family name and differentiate them from hash symbol(#), in other hand,in iOS,mainly we use just font name.

5.Now we ready to use font awesome.Here is a example of Font awesome:


<Label Text="&#xf031;FontFamily="{StaticResource AwesomeSolidFontFamily}" TextColor="Black"/>


In example,you can see that the text is in the specific format first we have to add "&#x" then the specific code for each icon(you can find these unicode on font awesome site) and then ";".  

No comments:

Post a Comment

Implementation of Font awesome

Introduction     Hello All Today we will understand how to add icon or images with help of font  awesome.Font awesome is a font fa...