How to Use Font Awesome in Photoshop and Illustrator

So I am always in Adobe PhotoShop and Illustrator, they are two programs that never close on my computer. Whether it is creating featured images for my blog posts or mocking up landing pages, I am always designing. This is a little trick on how to use Font Awesome in Photoshop and Illustrator.

How to Use Font Awesome in Photoshop and Illustrator

First I want to give a shout out to Dave Gandy, the creator of Font Awesome. I have literally used it in hundreds of projects, and it definitely helps speed up WordPress, since you don’t need physical images.

Step 1

First you need to install the Font Awesome fonts on your computer. Either visit Font Awesome or download directly (4.5.0).

Step 2

In the file you download, unzip it and install the fonts on your computer.

font awesome install

Step 3

Next, to use a font awesome icon in Adobe Photoshop or Illustrator you have to copy it from the Font Awesome Cheatsheet. The trick here is you have to highlight the icon you want and copy it to your clipboard. In my example, you can see I highlighted the fa-cloud icon. You can right click and copy or CTRL+C / Cmd-C.

highlight font awesome icon

Step 4

Next you need to paste it into PhotoShop or Illustrator. CTRL + V / CMD + V. You will wind up with a block X like in the picture below.

paste font awesome icon

Step 5

Highlight the broken font and in the character field change it to “FontAwesome.”

change to font awesomeYou will now see the font awesome icon show up.

How to Use Font Awesome in Photoshop

And that’s it! You can change colors, size, etc. Was this quick tutorial on how to use font awesome in Photoshop and Illustrator helpful? If so, please let me know below in the comments.

Brian Jackson

I craft actionable content and develop performance-driven WordPress plugins. Connect on Twitter or subscribe to my newsletter (twice a month, no spam).

8 thoughts on “How to Use Font Awesome in Photoshop and Illustrator”

Leave a Comment