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 8/15/18

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

Resources (1)

or Join for free to access materials
Name
Added
File Size

Comments (5)

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

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!​