Share
Harjeet Singh
Chief Visual Artist

How to use Font awesome in Photoshop cc, Illustrator, Indesign or other graphic software

Technical Tutorial Published 1/17/17 Last updated on 6/10/19

Lots of peoples and my students asked me, is there any option that we don’t need to use images for icons in Adobe Photoshop or It will take lots of time to create icons for their design. So, I come up with a solution J and Its FONT AWESOME.

What is Font Awesome?

Font awesome gives you 600+ scalable vector icons. You can use them in web designing. These icons can instantly customize through CSS (Cascading style sheet). You can change their size, color, rotation, shadows and anything. These days’ font awesome become very popular to add icons in websites.

In this photoshop tutorial we are going to learn how we can use font awesome icons in any graphic design software. After this tutorial, you will be able to use any type of font icons in your design like Bootstrap Glyphicons, Fontello etc. Let’s Begin.

#1 Download and Install Font awesome

First, you need to download latest font awesome kit from their website
Got to http://fontawesome.io/ then click on download button.

#2 Install Font awesome

  1. Once you download, Open Font Awesome folder. In this folder, you will find Css, font, less, scss folder. You need open fonts folder.
  2. Just double click on FontAwesome.otf (Open type font file) or right click then click on open.
  3. Then click on Install Button.

#3 Choose Font awesome

  1. After Installation you need to open font awesome cheat sheet click Here to open.
  2. Select any icon you want to use and copy it (Ctrl+C or Cmd + C). I am using heart icon (fa-heart-o)

#3 Use Font awesome in Photoshop cc

  1. Now Open Photoshop.
  2. Create a new document (Ctrl+N)
  3. Select type tool and paste you copied icon (Ctrl+V or Cmd+V). It will look something like image given below.
  4. Go to control panel and change font to Font Awesome.
  5. Hopefully the article of How to use Font awesome in Adobe Photoshop cc, Adobe Illustrator, Adobe InDesign and other Graphic Software? useful for you.
Products
  • Illustrator Draw

    Create freeform vector designs on your mobile device.

  • Adobe Premiere Pro

    Edit media in its native format and create productions for film, TV, and web.

  • Photoshop

    Editing and compositing for photos, web and mobile app designs, 3D artwork, videos, and more.

  • Edge Animate

  • After Effects

    Create motion graphics and visual effects for film, TV, video, and web.

  • Animate

    Design interactive vector animations for multiple platforms.

  • Illustrator

    Create beautiful vector art and illustrations.

  • InDesign

    Craft elegant layouts at your desk or on the go.

Age Levels
ISTE NETS-S
Communication and Collaboration, Research and Information Fluency
Materials

To download Font Awesome:

http://fontawesome.io/

Font Awesome Cheat sheet:

http://fontawesome.io/cheatsheet/

CC License
Attribution Non-Commercial Share Alike
Ratings
5 / 5 • 12 Ratings

Resources (1)

or Join for free to access materials
Name
Added
File Size

Comments (21)

Write a reply...
or Join for free to view all comments and participate in the discussion.

Hulda Black

Posted on 10/14/19 9:16:49 PM Permalink

​Perfect timing - just was addressing this in my class!

Fonacier Balatero , Jr.

Posted on 9/27/19 1:05:32 AM Permalink

​wow! amazing! thanks for sharing, this will really help.

Alper Ciftci

Posted on 9/7/19 1:58:24 PM Permalink

​Thanks

Tema Android

Posted on 8/17/19 2:55:57 AM Permalink

​wow.. Nice post . Very useful resources

Thank you so much

Mick Perkins

Posted on 7/26/19 10:41:23 PM Permalink

recommending its use to all my students - thanks again

Mick Perkins

Posted on 6/29/19 4:29:18 AM Permalink

Fantastic font and can be used creating info graphics and tables
Thanks for the resource

Becky Barsi

Posted on 6/13/19 12:11:32 PM Permalink

​Exited to learn about this new tool, but found the explainer video a little hard to follow. I look forward to experimenting.

GHOBRINI Mourad

Posted on 6/4/19 5:34:20 PM Permalink

Very useful resources thanks for sharing

Darshani Persadh

Posted on 5/19/19 7:51:27 PM Permalink

Thank you so much for sharing.

Cortez William

Posted on 5/19/19 5:41:53 AM Permalink

​Thanks for the resource. It is an added value to be creative in using fonts.

Carl Thompson

Posted on 5/6/19 10:28:31 PM Permalink

​Will this work in XD?

Harjeet Singh

Posted on 6/4/19 7:18:28 PM Permalink

yes it will work in any design software​

Kris Caluwaerts

Posted on 4/24/19 11:49:00 AM Permalink

​As an alternative, once you have installed the font locally you can also use the Glyph functionality in InDesign to insert the symbols.

Once inside the Glyph screen the grid of symbols may be overwhelming. You can use the codes that are shown in the cheatsheet to search for the symbols. Once you've found it just doubleclick to insert.

​Here's the cheatsheet : https://fontawesome.com/cheatsheet

3mk Abdullah 7ar8 dm omk

Posted on 2/28/19 5:08:47 AM Permalink

​This Not working

By 3mk 7ar8 Dm OMK

كل زق *

Ali Imam Reza

Posted on 2/20/19 8:21:11 PM Permalink

​thanks

Ajay Gorecha

Posted on 10/19/18 5:24:35 AM Permalink

Denis Simtel

Posted on 3/3/18 1:22:32 PM Permalink

Thanks a lot!​

Diana Ascher

Posted on 11/9/17 11:46:39 PM Permalink

​It would be helpful to learn how Font Awesome can be integrated into the available fonts within the Adobe Creative Suite, rather than copying and pasting from another type of application.

Anna Compton

Posted on 7/15/18 7:02:25 PM Permalink

You don't have to copy paste. Just open Glyphs, find Font Awesome and use the icon you need:))​

Manpreet Singh

Posted on 12/14/18 12:08:18 PM Permalink

Why did I not think of that before! Thanks so much for this tip!​

Harjeet Singh

Posted on 6/4/19 7:20:40 PM Permalink

yes bit its quite difficult to find icons in glyphs... If you the name of the icons then you can find it on cheetsheet otherwise you need to scroll and find the icons..​