How to Use Font Awesome in Photoshop Designs

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

Instructor

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

0 0 votes
Blog Rating
Subscribe
Notify of
50 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Diego Leonardo Puente

great, works like a charm, ty

Jojo

Thanks!

Atiqur Sumon

I know what you are saying. Ok, you have done or showing great job I am so glad of you. This is one kind of unique post.

Dalmatinac

Thank you.

Antaroop

Thank You, This is a very helpful stuff. Thanks again.

Mirchu

thx nice tutorial . i just do it in 2 mints to read this :). thxxx alot . 🙂

Jacob

Perfect Guide..Thank You !!

Ratheesh PR

AWESOME BRO

shagun

i cant use font awesomein photoshop

Sam

this does not work any more

Max Lazarenko

this doesn’t work in Adobe Muse. Maybe i got something wrong but i get other icons when pasting.

Péăçëfǔl Ģǔŷ

it dosnt work anymore ??

Carola C.

If it doesn’t work, download and install the font again, it may have been updated or changed.

James L.

Thanks for the tutorial, but it doesn’t work with Photoshop CC in Windows 10. Apparently, it blocks the font from being listed in the Photoshop font list. Tried restarting Photoshop. Thanks though.

James L.

Update: The directions are just a bit out of date it seems for PS/Win10.

How to:

Unpack the zip file

Double click the FontAwesome font(s) you want to install.

Restart Photoshop

James Cooper

Wow its simple but beautiful font. I am going to add this in my Photoshop version.Thank you for the download link as well.

Madhu Mia

Thanks nice article.its worked really

.

Asghar Ali

very helpful. . . . .

thanks dear

ClippingPath ServiceProviders

Thanks for share those awesome technique. I will apply in my infographic design

Satiz UI

Great, Perfect Guide..Thank You so much !!

Nick

Thanks for the kind words, Satiz! 🙂

Dulshan Madusanka

wow.. thank you.

Ariq Naufal

thanks for this. works perfectly 🙂

Tibow

Great tutorial. Thx a lot and have fun !

Kavitha Velayutham

Very Useful thank u

daniel-pickering

Thanks for the kind words Kavitha
Daniel

Jack

WHERE IS THE LIKE BUTTONNN FOR THE ARTICLE … oh nevermind i found it.

Shadrack Nyagwaswa Jr.

I think [url=http://fontawesome.io/icons/]http://fontawesome.io/icons/[/url] have update their site or something because u cant copy any more.

Julius

@shadracknyagwaswajr It works… I used the instructions from this site [url=https://edex.adobe.com/resource/ff62-8cf/]https://edex.adobe.com/reso…[/url] Once you install the font just make sure you copy & paste the icon itself and NOT the unicode (like I did). Hope this helps.

Conor Treacy

Don’t copy from the /icons page, you need to copy from the /cheatsheet page.

Shadrack Nyagwaswa Jr.

Thank you Conor i figured it after a few hours.

Conor Treacy

No worries, I figured after 5 months you’d have the answer. Figured I’d pop the answer here for the next guy (or my wife – who also struggled with this) 🙂

Danilo Guerra

For those who cant copy it from the website use this link, this worked for me. Also you can copy and paste it in a text box that already has text and get a box with an X make sure to highlight the text and use the “fontawesome” font
[url=http://fontawesome.io/cheatsheet/]http://fontawesome.io/cheat…[/url]

Stefan

Thank you!!! 🙂

Jon

Thank you – Worked as instructed!

Sancdan

Thanks! Useful!

grimey

Thanks for the post.

Sruthinlal

this does not work any more icons, like ‘search’ for Photoshop.

Chris

Make sure you set the font weight to bold, not regular.. you see the text in regular and the icon in bold…

Durg

Thank you for this, I was stuck here for about a half hour and was getting frustrated.

Andrea Wilson

This was the piece I was missing… BOLD! Thank you!

Eva

I love you! I’ve been pulling my hair out for an hour why some icons would work and some others won’t! And this was the issue. Some icons just don’t work unless you set it to ‘solid’. 

Unbelievable that neither the official font awesome website nor any other tutorial mentions this.

Anonymous

Tks for this! 🙂

C.K.

Font Awesome was created by Dave Gandy and is now owned by Fonticons, Inc. Font Awesome is not a Google product.

nahid hossain

thank you

naveen

Hi, absolutely got tons of value from your post. Please i have 2 quick questions.
1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?

Gagan Kapoor

great..thanks!

demo123

thank you 

50
0
Would love your thoughts, please comment.x
()
x