Font Icons in Xamarin Forms Bootstrap and Material Design
We love everything that makes the process of building beautiful applications easier. Using font Icons in Xamarin Forms apps makes this easier. Having to skip the process of creating and adding manually every icon for our application is just awesome. Font Icons are a great tool which we can leverage for this purpose.
Several months ago, I wrote this blog post about adding Font Awesome Icons in your Xamarin Forms applications. Now, here is a simple blog post about using Bootstrap and Material font icons in your Xamarin Forms apps.
Getting The Font Icons
These steps explains how to get the font icons. For Bootstrap and Material Design.
Here is the source code for this demo app.
Bootstrap
You can get bootstrap glyph icons from github. Here is the link to the file. Make sure you get the file named: “glyphicons-halflings-regular.ttf”. This file will be added later to our platform projects.
Material Design
Material design font icons can be downloaded from this source: here is the link. Click the big download button at the top right corner of the page.
Adding Font Icons in Xamarin Forms
The font icons should be added in the platform specific projects. There is a specific way to add font icons for each platform.
Android
On Android, it is easy to add the font icons to your app. Just add the font icons to your Assets folder in your android platform specific project.
iOS
On iOS, you need to add the font icons to the Resources folder in the iOS project. Then, edit the info.plist file.
<key>UIAppFonts</key>
<array>
<string>glyphicons-halflings-regular.ttf</string>
<string>materialdesignicons-webfont.ttf</string>
</array>
Accessing The Fonts in Your App
To display these fonts in your app, you can add it as a resource and call the resource as font style for a Label.
Bootstrap
<OnPlatform x:Key="Bootstrap" x:TypeArguments="x:String">
<On Platform="iOS" Value="Glyphicons" />
<On Platform="Android" Value="glyphicons-halflings-regular.ttf#Glyphicons" />
</OnPlatform>After defining the Bootstrap resource, we use it as font style for any label which should contain bootstrap icons.
<Style TargetType="{x:Type Label}" x:Key="BotstrapIcons">
<Setter Property="FontFamily" Value="{StaticResource Bootstrap}"/>
<Setter Property="FontSize" Value="100"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="TextColor" Value="LightSkyBlue"/>
</Style>Material Design
<OnPlatform x:Key="Material" x:TypeArguments="x:String">
<On Platform="iOS" Value="Material Design Icons" />
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>Above we defined a Material Design font style resource. This will be designed a the Font style of every label which serves as icon in your app.
<Style TargetType="{x:Type Label}" x:Key="MaterialIcons">
<Setter Property="FontFamily" Value="{StaticResource Material}"/>
<Setter Property="FontSize" Value="100"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="TextColor" Value="LightSkyBlue"/>
<Setter Property="FontSize" Value="Large"/>
</Style>Using the Font Icons in your App
To display the icons in your app, you need to get the code for each icon. Either Bootstrap or Material design.
Bootstrap
To get bootstrap icons code, you can follow this link. Select the icon you want to add and get its “Unicode HTML Entity”. This code will be added to your XAML preceding the “&#x” characters and ending with “;” character. As follows:
<Label Style="{StaticResource BotstrapIcons}" TextColor="Red" Text="*" FontSize="100"/> <Label Style="{StaticResource BotstrapIcons}" Grid.Column="0" Grid.Row="1" Text="" FontSize="100"/> <Label Style="{StaticResource BotstrapIcons}" Grid.Column="0" Grid.Row="2" Text="" FontSize="100"/> <Label Style="{StaticResource BotstrapIcons}" Grid.Column="1" Grid.Row="0" Text="" TextColor="LightGray" FontSize="100"/>Material Design
To get Material design icon codes, you can navigate to this tool . Browse and upload your font icons file. It will generate the code for each font as used in C#. To use the code generated in XAML, replace the ‘\u’ character with ‘&#x’ and at the end add a ‘;’.
<Label Style="{StaticResource MaterialIcons}" TextColor="Red" Text="" FontSize="100"/> <Label Style="{StaticResource MaterialIcons}" Grid.Column="0" Grid.Row="1" Text="" FontSize="100"/> <Label Style="{StaticResource MaterialIcons}" Grid.Column="0" Grid.Row="2" Text="" FontSize="100"/> <Label Style="{StaticResource MaterialIcons}" Grid.Column="1" Grid.Row="0" Text="" TextColor="Yellow" FontSize="100"/>
Font Icons in Xamarin Forms Material Design
Font Icons in Xamarin Forms Bootstrap
Here is the source code for this demo app.
Conclusion
Leveraging font icons can help us go faster in the process of app development. Hopefully, this post will permit you to leverage these tools easily. You can find a little more about Material Design icons in Xamarin.Forms via this blog post by James Montemagno.
If you liked this post, or it was useful to you, please 👍 like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter, Github and like my page on facebook. And every other social media by clicking on the buttons at the end of this post.Follow me on social media and stay updated
Want to get your idea turned into software ? Visit To Tech.Follow me on social media and stay updated