Download and Install Font Awesome

• Download the font awesome text here: http://fontawesome.io/assets/font-awesome-4.7.0.zip
• Uncompress the ZIP file
• You should now see 4 folders and a .txt file:
  • css
  • fonts (Select this folder)
  • less
  • scss
  • and HELP-US-OUT.txt

• 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

• Open up your favorite web browser and navigate to this cheatsheet: http://fontawesome.io/cheatsheet/
  • Good idea to bookmark this page for later reference or
  • Download this cheatsheet as a PDF

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

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.

Marceel Marchena

Marceel is the Founder/CEO of Quiksnip. He enjoys writing about social media marketing and productivity hacks. He enjoys helping startups grow their brand and find their target audience.