Apparently, I’m really into writing font-related posts this month! Today I have another one for you involving a web and desktop font that consists of icons and icons only – Font Awesome. When you install Font Awesome, you can place the icons anywhere on your website using HTML and then style them with CSS. You can also download this font to your desktop and use it in applications like Photoshop and Illustrator. For now I’m going to focus on using them for your blog, particularly on the WordPress platform.
There are several different ways to use icons in web design, but Font Awesome is my tool of choice for a few reasons. First of all, it’s free! That is always a great deciding factor. Using Font Awesome is so much better than uploading tiny icon images because as a font, the icons will be scalable and never lose quality. Another reason to love Font Awesome is that the options for on for days.
How to Install and Use Font Awesome on your WordPress Site
1. To use Font Awesome icons, you’ll need to add code to the <head> section of your theme. If you’re using a Genesis theme, go to Genesis >> Theme Settings in your Dashboard and you’ll find a place to add to the header. Otherwise, download the plugin Insert Headers and Footers then go to Settings >> Insert Headers and Footers in your Dashboard.
2. Copy and paste the following line of code into your <head> section:
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>
3. Now you can begin using all of the Font Awesome icons in your HTML using this format:
<i class=”fa fa-pinterest”></i>
Result:
So cute and tiny! Need to make it bigger? Try this code:
<i class=”fa fa-pinterest fa-lg”></i>
Result:
To view a complete organized list of the icons available, click here. And you can find more icon customization code snippets on this page. I prefer to customize Font Awesome icons using CSS, which works the same as any other CSS customization – just find the class and add some attributes.
Do you use Font Awesome or any other icon-based fonts? The creator of Font Awesome also made a line of icons called Black Tie and I love how clean and minimal it is. Check it out here!
Lindsay says
I love using font awesome icons, and there’s so much flexibility with how you can use them just beyond the size. The only hang up with them is no Yumly icon yet, but other than that, they are always my default!
Jennifer says
Yeah, it’s always a bummer when they don’t have an icon I need! Hopefully their icon library just keeps growing. :)
sher says
Hi Jennifer! can you share how you created your categories widget in the sidebar? how do you have the text aligned left and the font awesome icon to the right?
Thanks!
Sher
http://www.shershegoes.com