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
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
- Giving Page 101: The Anatomy of An Effective Donation Page - October 20, 2017
- Tips for Creating a Nonprofit Website Part I: Choosing Your Primary Audience - September 11, 2017
- A Look Behind the Design for the Denver Analytics Forum Event Website - August 22, 2017
