Font Awesome Enticing Features. Do More Than Ever With Font Awesome Icons. There’s no need to open Illustrator, Photoshop or other image editing software when scaling font awesome icons to size. It doesn’t matter what the pixel density is like or how good the device’s screen density is, the icons will look perfect.
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
Once you download, Open Font Awesome folder. In this folder, you will find Css, font, less, scss folder. You need open fonts folder.
Just double click on FontAwesome.otf (Open type font file) or right click then click on open.
Then click on Install Button.
#3 Choose Font awesome
After Installation you need to open font awesome cheat sheet click Hereto open.
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
Now Open Photoshop.
Create a new document (Ctrl+N)
Select type tool and paste you copied icon (Ctrl+V or Cmd+V). It will look something like image given below.
Go to control panel and change font to Font Awesome.
Hopefully the article of How to use Font awesome in Adobe Photoshop cc, Adobe Illustrator, Adobe InDesign and other Graphic Software? useful for you.
This week, Tafsirul, a designer from my team asked me how to use Font Awesome icons in Photoshop. At first, I was a bit surprised thinking about what might be the issue here that was causing him trouble. But then I noticed that, although it is clearly instructed in the website, if someone goes to Font Awesome Homepage, it gets a bit confusing to find out the instruction page. I felt like sharing the process here so that others can do it easily as well.
Download the latest Font Awesome pack from http://fortawesome.github.io/Font-Awesome/
Unzip the package and install FontAwesome.OTF (the font format that is supported in both Windows and Mac)
Go to Font Awesome cheat-sheet page at http://fortawesome.github.io/Font-Awesome/cheatsheet/ where there is a list of all Font Awesome icons, corresponding CSS classes and the Unicode representations
Ignore the CSS class and the Unicode part, just select the icon you want to use from the list (double click on a icon to select quickly) and copy it
Create a text layer in Photoshop or Illustrator, and paste the icon