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.
- First, head on over to the Font Awesome’s site and download the latest version of the icon set.
- 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.
- 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.
- 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.
- 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.