How to integrate Font Awesome in WPF Application.

Font Awesome is really a good choice for those who are looking for icons fonts instead of heavy images that needs to embed in to the application, that makes application heavy with lots of images.

Font Awesome has many advantages, like you don't have to care of colors, if you need to change it any time, you have to just change simple property value of  XAML controls. Also you don't have to care of the size and pixel rendering, Font Awesome is really good in that as it uses vector graphics, so simply settings FontSize or relative properties on control will do your job.

Lets have a look on how to integrate Font Awesome in your WPF application:

1> First you have to download Font Awesome which you can from below link :

    http://fortawesome.github.io/Font-Awesome/

2>Now create an File->New Project -> WPF Application.

3>Add new folder "Fonts" in your application.

4>Extract Font Awesome downloaded zip, inside fonts you will find "fontawesome-webfont.ttf" file, add this file to your "Fonts" folder in your application. Below is the screenshot of how its in VS 2012

5>Add below snippet to App.xaml file inside <Application.Resources> tag
  
<FontFamily x:Key="FontAwesome">/Fonts/fontawesome-webfont.ttf#FontAwesome</FontFamily>

6> Open MainWindow.xaml and replace the grid with below snippet:

<Grid VerticalAlignment="Center" HorizontalAlignment="Center">

<StackPanel Orientation="Horizontal" >

<TextBlock Text="I" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>

           
<TextBlock x:Name="tbFontAwesome" Text="&#xf004;" FontFamily="{StaticResource FontAwesome}" Foreground="Red" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>
<TextBlock Text="Font Awesome" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>

</StackPanel>

</Grid>


7> Notice "Text" property of  "tbFontAwesome" textblock, its the Unicode for Heart.You can find more others from this below link:

http://fortawesome.github.io/Font-Awesome/cheatsheet/


8>Now run the application and you will see the output as below.So now you can set size or color of your choice.