How to Use Font Awesome in Photoshop Designs

| Web Design

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

02 download 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

03 extract font awesome free to your harddrive

  • 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:

05 find use on desktop folder

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

06 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:

07 learn solid regular and brand icons

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

04 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:

09 font awesome font files seen in font manager

  • 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:

10 font awesome available at your photoshop

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":

11 select font type select icon

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:

12 click horizontal type tool draw and select font awesome

  • Type address-card inside the rectangle:

13 type in the icon name

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

14 icon displayed

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 

About the author

Born from Ukrainian mother and Russian father, Alex migrated to the United Kingdom in 1999. He is a self-taught Microsoft Certified Professional. He enjoys learning content management systems and helping web site developers make the most of them.