If you love SVGs, you probably have already discovered the beauty of Font Awesome. If not, here’s a little tutorial for how to get beautiful, scalable icons on your site without going through all the hassle of creating SVGs. It’s also more secure.
Because it’s a font and not a graphic, the CSS can be beautifully controlled. Imagine being able to change color, size and positioning without touching an EPS, SVG or PNG file.
To see how to use Font Awesome in your designs and web mockups, check out the post, “How To Use Font Awesome In Your Designs.”
For instructions on how to use Font Awesome in your designs, check out this post.
Step 1: Go here: http://fontawesome.io/get-started/
Enter your email address. Your site’s embed code will be emailed to you.
Step 2: Copy and paste the code from the e-mail and put it in the head code. To do this, use one of the following methods:
- For Genesis users: install and active the plugin Genesis Simple Edits. Navigate to Genesis > Theme Settings. Scroll down to “Header and Footer Scripts.” Paste the emailed code in the “Header Scripts” area. Save.
- For others, install and active Insert Headers and Footers plugin. Go to Settings > Insert Headers and Fooders and paste the code that was in your email in the “scripts in header” area. Save. (Indebted to WPBeginner for this method).
Step 3: Go to this page. http://fontawesome.io/icons/
Use control+F to find an icon that works for you. I searched for a gear. I clicked on it and came to this page:
This is my icon code:
<i class="fa fa-cogs" aria-hidden="true"></i>
Step 4: This step is going to require somewhere where you can edit the HTML of your page. I usually create new templates for my WordPress sites so I have complete control over the page. For a tutorial on how to do this, check out How To Create A Custom Page in WordPress. You are going to need to be able to do this or use a plugin that allows you to insert PHP code shortcodes into your pages. I used to use one called PHP snippets, but it has disappeared, probably because this method is not advisable. If I can find an advisable method for inserting PHP queries within your site without opening up the PHP php files in your theme’s folder, I will add it. But it’s really worth learning and not as scary as it might sound if you’re a newbie at it.
Go to your PHP template or the PHP snippet you are creating and insert the code the icon’s page has for you to copy and paste. I used front-page.php, creating a custom loop where I wanted our work features to be featured. I used the gear icon as part of the heading. I used the code given, with one change. I added my own fa class to the layer, so I could control the color, size, and positioning and the styles would stay even if I were to change the icon later. So I added work-fa after fa-gears. Also, it looks like the name for fa-cogs used to be fa-gears, just a month ago or so. It still works, but you should use the new name, fa-cogs.
<i class="fa fa-gears work-fa" aria-hidden="true"></i>
Check out how I inserted it into my loop here.
Step 5: The CSS. Here’s mine.
And this is how it looks.
Every icon on this page is a Font Awesome icon.
- 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