Font Awesome in Windows Phone 8

I am a big fan of Font Awesome. The icon set completely delivers what it advertises:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

I use it for my icons on this site, and decided to give the popular icon set a go in Stack Careers Browser. The problem I ran into is that I did not use CSS or Twitter Bootstrap in the windows phone application.

To use Font Awesome, I had to do a few simple things.

Download the fontpack and add to your project

  • Download the font and unzip it into a folder.
  • Add fontawesome-webfont.ttf to your UI project

    Image of project in library

  • Set the Build Action to Content

    image of properties on font

Add a style for the font

In the App.xaml, add the following in the Application.Resources tag:

<FontFamily x:Key="FontAwesome">/Library/fontawesome-webfont.ttf#FontAwesome</FontFamily>

This allows you to reference the font later on in specific controls where you want to use an icon.

Use the font-style in your xaml

In Stack Careers, I referenced the font-set two different ways.

In a textblock, set the fontfamily to the key from your App.xaml, and set the text to the desired icon unicode.

In this case I wanted the Location Arrow for the My Location feature.

<TextBlock FontFamily="{StaticResource FontAwesome}" Text="&#xf124;" />

Which results in this.
image of button

To set an icon through code instead of markup.

To set the Spolsky Test results, if provided, I used a converter and needed to set the text in code.

I chose to use a converter to handle setting the unicode value for the two icons I wanted to use on this view.

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value != null)
        {
            return (bool) value ? "\uf046" : "\uf096";
        }
        return null;
    }

Add the converter to the App.xaml resources tag.

<stackOverflowCareers:BoolToTextConverter x:Key="BoolToTextConverter" />           

And setup the property in your view xaml

<TextBlock Grid.Column="0" Text="{Binding Checked, Converter={StaticResource 
BoolToTextConverter}}" FontFamily="{StaticResource FontAwesome}" 
Style="{StaticResource WrappedTextStyle}" />

Image of Spolsky Results 1 Image of Spolsky Results 2

That's it! In this post we covered how to use the popular Font Awesome icon set in a windows phone app using c# and xaml.

You can download the application here:

stuff

If you are curious, you can view the code here

comments powered by Disqus