Using Font Awesome icons outside the browser

fontawesome-logo

Over the last year, we’ve become fans of Font Awesome – the iconic font designed for use with Bootstrap. We have used Font Awesome icons in MyUW Mobile and most recently in the UW Event Calendar redesign. In fact, we like Font Awesome so much that we should probably just get a room.

Because Font Awesome is an actual font — as opposed to a graphical icon set — we needed a way to use the Font Awesome icons as images that we could add to mockups and wireframes during the design process when we weren’t designing in the browser. The instructions provided by Font Awesome for this purpose are not very detailed, so we thought we would spell it out in clear, unequivocal steps.

Lucky for us, the good folks at Font Awesome included a “cheat sheet” of sorts that allows any of the 361 Font Awesome icons to be used as images in design applications like Photoshop, Illustrator and many others.

So what’s the process?

Follow along with these simple steps and you’ll be using the font icons as graphics in no time at all.

  1. First, head on over to the Font Awesome’s site and download the latest version of the icon set.
  2. Unzip the downloaded archive and install the FontAwesome.otf font file on your computer’s font directory. For Mac users, use Font Book. Windows users can follow these steps.
  3. Once the FontAwesome.otf file is installed on your machine, open your favorite desktop design application (for this tutorial’s purposes, I’ll use Adobe Illustrator). Check and make sure the Font Awesome font was installed correctly by viewing the list available fonts in your application.

    Font Awesome font appears in my list of available in Adobe Illustrator

    Font Awesome font appears in my list of available fonts in Adobe Illustrator

  4. After font is installed, go to Font Awesome’s Cheat Sheet and copy the actual icon (not the unicode) and then paste it into your design application using it’s Text tool. For an example, I’ve highlighted and copied the “cog” icon, then I pasted it into Illustrator.
    Highlight and copy the actual icon and paste into your design application

    Highlight and copy the actual icon and paste into your design application

    Screen Shot 2013-07-29 at 4.08.10 PM

    Icon added as object in Illustrator

  5. Once it’s copied and pasted into you design application, you can edit the icon as you would any other object, and you can save and export in any format supported.

I hope this simple tutorial has been helpful. Let us know in the comments what you think.

Diego Bejarano

Diego is a member of the ACA UX team. Follow Diego on twitter: @thebexar

2 comments

  1. Peter Osborne · July 30

    Thanks guys. I’ve been stumped on this one for weeks! As you say, the FontAwesome instructions aren’t very clear.

  2. Kevin Pittman · July 30

    Another easy way to use these is just as fonts. I typically create a icons stencil in Omnigraffle by typing every unique character. When I need an icon I just drag it in from the stencil.