Font Awesome! The most popular iconic font and CSS toolkit, ever you seen in modern web. And Photoshop and Illustrator, these two things are essential for web designers. You may need to design a layout for your client and thinking to use all icons with Font Awesome. So that you need a reflection of that icon in your PSD.
Today I am going to share a tricky guideline that how to use font awesome toolkit in your photoshop and adding its icon into your PSD.
Just follow the below steps with me and take the advantage –
Download and Install Font Awesome on Your Mac or PC
- Go to Font Awesome and download it to your local machine.
- Unzip the downloaded file and locate fonts/ directory.
- Copy the FontAwesome.otf and fontawesome-webfont.ttf file.
- Locate your operating system font directory. The location of font directory depends on your operating system.
- For windows you can find it on C:\Windows\Fonts and for OS X location is /Library/Fonts/ for local any user.
- Now paste those files into this directory.
Adding Font Awesome Icon into Photoshop and Illustrator Design
- Using font awesome icon, you need to have a cheat sheet which is located on Cheat Sheet section on Font Awesome website.
- From this list, you need to copy your desired one.
- Now Open Photoshop and create a new file.
- Navigate the Text tool and paste it into Photoshop by using Ctrl + V or Cmd + V.
- A block X character will appear on this text layer, which is a broken text.
- Now go to the top bar and find the font section and change the font to FontAwesome.
- Yes, see the magic.
Another Way You Can Use a Photoshop Plugin like Font Awesome PS
With this plugin, you can easily access Font Awesome icons. It’s totally easy to create a new layer shape by searching an icon. Easy to edit.
So that’s it and this is very simple! Just using FontAwesome and have fun!