Wanna Pixel

CiviCRM, Fundraising and Web Solutions for Nonprofits

  • News
  • Team
  • Client Work
  • Contact Us
  • About

powering nonprofits for social good

how to use font awesome in your designs

How To Use Font Awesome In Your Designs

Marisa Porter - July 26, 2017

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.

 

how to use font awesome in your designs

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

print
  • About the Author
  • Latest Posts

About Marisa Porter

From responsive emails to content strategy, from pixel-perfect mobile first designs to interactive user experiences that meet people where they are, Marisa Porter serves the clients of Wanna Pixel Inc. by overseeing the creative process for and development of their web based projects.

  • 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
View All Posts
Tweet
Share4
Pin
Share
4 Shares
← Previous Next →

Copyright © 2022 · Wanna Pixel Inc. ·

PRIVACY POLICY

What are you looking for today?

our top 3 requests

A New Website

Help with CiviCRM

Ongoing Support

 Tweet
 Share
 Tweet
 Share
 Tweet
 Share