Post headline image

Using Font Awesome in your Windows Phone 8 app

One of my favorite projects on the web is Font Awesome. If you haven't heard of it, it is an OpenType font with nearly 250 Metro-ready icons. It is designed to replace the GlyphIcons in Bootstrap, but as it turns out, it also works famously for Windows Phone 7.5 and Windows Phone 8 applications. However, there isn't a lot of info on how to ember a font in your app, and the forum posts on the subject are a bit sketchy. So I thought I'd whip up a quick tutorial.

First off, you'll need to download the Font Awesome zip file. Inside is a folder called "font". Grab "FontAwesome.otf" from that folder, and drop it into your project. I like to put it in the "Resources" folder, because you need to mark the Build Action as "Resource"... so it just keeps things simple.

Once you've done that, it's pretty easy to replace your app icons with fonts (I haven't figured out how to do it for the AppBar yet, but once I do, I'll update this post.) Just use the following:

<TextBlock Text="&#xf0ee;" Foreground="#99DDDD" FontFamily="/YourXAPName;component/Resources/FontAwesome.otf#FontAwesome" />

Replace "YourXAPName" with the name of your XAP file (minus the ".xap", of course) from your Project properties page. Now, you'll notice the text is an HTML character code instead of regular text. That is so that these symbols don't collide with regular letters. You can figure out which code to use from this handy page.

The result is the cloud icon depicted in the image at right. This is a screenshot from our next Windows Phone work-in-progress, which is a Windows Phone client for the New Relic server monitoring platform. We use New Relic to monitor AdvancedREI and give us insight into our our site is running, and we'll be using this app to keep close tabs on server uptime and performance.

There you have it folks. And speaking of Font Awesome, we recently added it to the rest of AdvancedREI, especially for editing Property Images for your listings... so if you haven't seen it yet, make sure you sign in and check us out.