Sometime after I started using Font Awesome on my websites, I was overjoyed to learn how to use them in designs. It’s pretty cool and very easy. (See my tutorial on how to use font awesome on your site).

Step 1: Go to this page

http://fontawesome.io/

And click download.

When the box pops up, click “no thanks just download Font Awesome 4.”

Step 2: Install the font. To do this, navigate the zip file you just downloaded to fonts > fontawesome-webfont.ttf for a PC. Or fontawesome-webfont.eot for Mac.

Step 3: Now for the best part. Simply go to http://fontawesome.io/cheatsheet/, and copy the icon (not the text) of the icon you want. You can search for it by using Control+F, or just scan them with your eyeballs.

Step 4: In your design, create a text box. I’ll use a Photoshop file.

 

Step 5: Change the font to FontAwesome.

Step 6: Select the text just as you would any other text, then click Control+V to paste the font awesome information in.

Tada! You now have an envelope (or whatever icon you selected) instead of a letter.

 

Isn’t Font Awesome cool? I love nothing more in the world of design than scalable elements, unless it is white space or beautiful color themes. Or typography. Typography is the best. Maybe because it is a bunch of scalable elements that carry centuries of meaning.

How To Use Font Awesome On Your Site