How to Install Font Awesome to Build Mockups in Photoshop and AI?

Last updated on December 1, 2016.

 

Are you looking to add icons to your web design mockups in Photoshop or Illustrator? Then this quick guide can help you. Download this page as a PDF.

Instead of having to search the web for icons and download individual files, you can use a comprehensive cheatsheet from Font Awesome to quickly add icons to your designs without downloading individual icon files. Each icon is placed as a “text” layer and easily scalable. If you are a developer, these can easily be added to your website too! Read the documentation about adding the Font Awesome CDN to your website.
First off, head over to the official Font Awesome website for the most recent updates. They are often releasing new fonts and tools, so making sure you are using the most updated files are crucial. Official Font Awesome Website: http://fontawesome.io/

Download and Install Font Awesome

  • Open the “fonts” folder
  • You should now see a variety of fonts:
    • fontawesome-webfont.eot
    • fontawesome-webfont.svg
    • fontawesome-webfont.ttf
    • fontawesome-webfont.woff
    • fontawesome-webfont.woff2
    • fontAwesome.otf (Install this one)
  • Install FontAwesome.otf

Open Up Your Cheatsheet

 

Add Icons to Your Designs

  • Open Up Photoshop or AI
  • Create a new “text” layer
  • Copy and paste an icon from the Font Awesome cheatsheet
    • *make sure the size can fit in the dimensions you set
    • If you see an [x] symbol, highlight the text.
    • Go up and change the font to “font awesome”
  • The icon should now appear
RELATED:   5 Timeless Web Design Tips For Building Your First Website

These icons are scalable so feel free to use them all over your design mockups. If you are having trouble using Font Awesome, head over to the official website to see if anything has changed. You can also send us a tweet with questions!

If this guide has helped you please support us by sharing this post on Facebook, Twitter, or Google+. You can also download a PDF transcript to print this entire article.

 

Notes:

Font Awesome is used on nearly every website you find online. Anywhere you see an icon for settings, social media, or even email contact, it is probably being imported by Font Awesome. This font works on both PCs and MACs, so don’t worry about compatibility issues.

Leave a Reply

Your email address will not be published. Required fields are marked *