How to Use Font Awesome in Photoshop Designs

The old-fashioned technique to create icons used to be manually cropping images to work as icons.

This was extremely time-consuming. Now Google’s Font Awesome icons solve this issue.

In this tutorial, you will learn how to place a Font Awesome icon in your Photoshop web document by simply typing in the icon’s name.

For the purpose of this tutorial, we will be working with Font Awesome Free. We will be using it with Photoshop CC 2018 installed on Windows 10.

You can apply these instructions as well to a paid version of Google Font Awesome Icons. Both the Free and Paid sets of icons can also be installed on Mac.

Step #1. Download the Font Awesome Free Icons

• Go to Font Awesome website and download the Font Awesome Free.

• Unzip the downloaded file on your hard drive. You should now see two folders:
  • fontawesome-free-x.y.z File folder
  • fontawesome-free-x.y.z Compressed (zipped) folder

• Go to the fontawesome-free-x.y.z file folder. You will see another fontawesome-free-x.y.z folder. Open it up.
• You will see a few folders and files. Find the use-on-desktop folder:

• Click on this folder. You should now see the Font Awesome font files:

• Right-click on any one of the three font types. To learn more how each of them displays icons, please visit the Font Awesome Icons Gallery:

• You will see the Context Menu popup. Click Install:

• Your font will install nearly instantly. Repeat the steps above to install the rest two font types if you wish.

Well done! You now have the Font Awesome font files installed on your Windows. Let’s just double check to make sure they did get installed on our Windows and are ready under our Photoshop.

• In your Windows, launch the Font Manager. You should see your font(s) happily displayed. I installed all three of them. So, my Font Manager displays all three for me:

• Launch your Photoshop. Open up the list of fonts available to you. You should now see the Font Awesome fonts listed, with one Font Awesome Free entry for both the Free Regular and the Free Solid Regular font types:

Step #2. Find a Font Awesome Icon Name

The Font Awesome Icons are now ready at your Photoshop as font types. Before you will be able to use an icon in your new or existing Photoshop document you need to find the icon name.

1. Go to the “Font Awesome Free’s Cheatsheet“. Select the required font type. For the purpose of this tutorial, I selected the “Solid”.

2. Find the icon name next to the icon you would like to use. For the purpose of this tutorial, I selected to add to my Photoshop image document the “address-card”:

Excellent!  You are now all set to add the selected Google Font Awesome icon to your new or existing Photoshop document.

Step #3. Add the Icon to Your Photoshop Image Document

You are now ready to add the “address-card” icon to your new or existing Photoshop document. In my example, I will be adding it to a new document.

1. Launch your Photoshop and create a new document. Click Horizontal Type tool.
2. Draw a rectangle.
3. Select Font Awesome Free:

• Type address-card inside the rectangle:

• Once you typed the full icon name, you will see the address-card text replaced by the icon itself:

There you have it. With your selected Google Font Awesome icon at your disposal, you can now carry on creating the rest of your Photoshop image document as you wish.

Additional Reading

• The Beginners Guide to Font Awesome
• Insert Font Awesome Icons in WordPress Posts and Pages
• Use Font Awesome Icons in WordPress Menu Items
• Add Font Awesome Icons to Your Drupal Menus
• Adding Font Awesome or Bootstrap Icons to Your Joomla Menu