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

Author

  • Alex Smirnov

    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
Article Rating
Subscribe
Notify of
50 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Diego Leonardo Puente
Diego Leonardo Puente
9 years ago

great, works like a charm, ty

Jojo
Jojo
9 years ago

Thanks!

Atiqur Sumon
Atiqur Sumon
9 years ago

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
Dalmatinac
9 years ago

Thank you.

Antaroop
Antaroop
9 years ago

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

Mirchu
Mirchu
8 years ago

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

Jacob
Jacob
8 years ago

Perfect Guide..Thank You !!

Ratheesh PR
Ratheesh PR
8 years ago

AWESOME BRO

shagun
shagun
8 years ago

i cant use font awesomein photoshop

Sam
Sam
8 years ago

this does not work any more

Max Lazarenko
Max Lazarenko
8 years ago

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

Péăçëfǔl Ģǔŷ
Péăçëfǔl Ģǔŷ
8 years ago

it dosnt work anymore ??

Carola C.
Carola C.
8 years ago

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

James L.
James L.
7 years ago

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.
James L.
7 years ago
Reply to  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
James Cooper
8 years ago

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
Madhu Mia
8 years ago

Thanks nice article.its worked really

.

Asghar Ali
Asghar Ali
8 years ago

very helpful. . . . .

thanks dear

ClippingPath ServiceProviders
ClippingPath ServiceProviders
7 years ago

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

Satiz UI
Satiz UI
7 years ago

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

Nick
7 years ago
Reply to  Satiz UI

Thanks for the kind words, Satiz! 🙂

Dulshan Madusanka
Dulshan Madusanka
7 years ago

wow.. thank you.

Ariq Naufal
Ariq Naufal
7 years ago

thanks for this. works perfectly 🙂

Tibow
Tibow
7 years ago

Great tutorial. Thx a lot and have fun !

Kavitha Velayutham
Kavitha Velayutham
7 years ago

Very Useful thank u

daniel-pickering
7 years ago

Thanks for the kind words Kavitha
Daniel

Jack
Jack
6 years ago

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

Shadrack Nyagwaswa Jr.
Shadrack Nyagwaswa Jr.
6 years ago

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
Julius
6 years ago

@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
Conor Treacy
6 years ago

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

Shadrack Nyagwaswa Jr.
Shadrack Nyagwaswa Jr.
6 years ago
Reply to  Conor Treacy

Thank you Conor i figured it after a few hours.

Conor Treacy
Conor Treacy
6 years ago

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
Danilo Guerra
6 years ago

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
Stefan
6 years ago

Thank you!!! 🙂

Jon
Jon
6 years ago

Thank you – Worked as instructed!

Sancdan
Sancdan
6 years ago

Thanks! Useful!

grimey
6 years ago

Thanks for the post.

Sruthinlal
Sruthinlal
6 years ago

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

Chris
Chris
4 years ago
Reply to  Sruthinlal

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

Durg
Durg
4 years ago
Reply to  Chris

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

Andrea Wilson
Andrea Wilson
4 years ago
Reply to  Chris

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

Eva
Eva
4 years ago
Reply to  Chris

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
Anonymous
5 years ago

Tks for this! 🙂

C.K.
C.K.
4 years ago

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

nahid hossain
nahid hossain
3 years ago

thank you

naveen
naveen
3 years ago

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
Gagan Kapoor
3 years ago

great..thanks!

demo123
3 years ago

thank you 

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