Font Awesome consists of a huge library of icons that you can use as both a web font and a desktop font. A while ago, I posted a Font Awesome for WordPress tutorial, explaining how to install and use the icons as part of your website’s design. I’ve used these icons on every single site I’ve developed, and I love how clean and pretty they are! In addition to using Font Awesome icons on the web, you can use them in Photoshop (or Illustrator, InDesign, etc). We’ve used Font Awesome icons to create several blog post graphics, most recently this one for Conscious Shop Collective.
Installing and using these icons for desktop purposes is just as easy as installing any regular font. Right now we’ll focus on using Font Awesome in Photoshop, but keep in mind that you can use it in other applications too. Here is a step-by-step tutorial on how it’s done!
1. Install Font Awesome to your Desktop Fonts Folder
Visit Font Awesome’s website and click the big download button on the main page. Your download will consist of one zip file that has a few different folders inside. You’ll want to choose the “fonts” folder, and then drag the file “FontAwesome.otf” to the Fonts folder on your hard drive. If you’re using a Mac, this folder will likely be found within your hard drive’s Library file. If you are using a PC or have no idea what I’m talking about, consult Google on how to install fonts onto your computer. :)
2. Open the Font Awesome Cheatsheet in your web browser
To place specific icons onto your canvas in Photoshop, first go to the Font Awesome Cheatsheet and then select and copy (⌘-C) specific icons directly from the page. Below, you can see that I’m choosing the Pinterest icon.
3. Open Photoshop and paste the icon using the Text Tool
After installing Font Awesome for the first time, you’ll need to quit and restart Photoshop (if it’s already open). When you choose the Text Tool, you’ll now find “FontAwesome Regular” listed as an option in your fonts menu. Choose this font and paste (⌘-V) the icon you just copied in the previous step.
4. Create a beautiful blog graphic
From here, you can change the color, size, and placement of the icon just as you would any regular text.
And there you have it! Have fun creating your blog graphics with Font Awesome and share any questions in the comments!
Maira says
There’s an FA extension for PS that’s easier to use, it doesn’t have the latest icons, but it works just fine. http://creativedo.co/FontAwesomePS