Font Awesome is a library of font-based icons that you can use on websites. I use them on Nose Graze! Since these icons are fonts, rather than images, they are vectors. That means they can be resized without loss of quality. And, since they’re fonts, you can change the colours with CSS!
Font Awesome is a great and easy way to add icons to your posts. Example:
Option #1
Option #2
Option #3
You can include icons in your search bar like this one:
Or, like me, you can add quote icons to your blockquotes:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis mauris nec lacus laoreet, id fringilla urna sagittis. Duis nec mi a turpis tristique cursus vitae id turpis. Maecenas porttitor condimentum sapien in tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et porta lectus. In ut scelerisque felis. Nullam non nisi sollicitudin, elementum nulla a, rutrum mi. Nullam ut quam accumsan augue pellentesque vestibulum. Curabitur eu sapien in ipsum blandit gravida. Morbi accumsan aliquam mi, id porttitor risus venenatis ut. Phasellus et facilisis velit, ut malesuada magna. Vivamus risus ipsum, sollicitudin sed aliquam id, blandit at metus.
And look at how big you can make them!
So how can you get the awesomeness of Font Awesome on YOUR blog?
You can either follow the instructions on Font Awesome’s website, or, you can install the WordPress plugin I made.
To install: download the .zip file, then go to Plugins » Add New » Upload, and upload the file there.
This plugin will add Font Awesome support to your blog by including the required CSS file, but it will also allow you to use the icons with shortcodes! Here’s an example:
[icon name="fa-heart"]
This will add the heart icon:
To see a list of icons and their names, check out the icon list on Font Awesome’s website.
oooooooooooo. I LIKE that!! especially the quote marks! Will we be able to use this plugin on bookhost?
I’ll add it shortly. 🙂
Oooh that’s nifty! 😀 I’m going to add that, even if it is just for the quote marks. 😀
Ashley, my computer is old and it has a problem, and I don’t know what the problem is. Something to do with Font Awesome, I think, because instead of seeing icons in this post I see tiny boxes with code inside. Example: in front of options 1, 2, 3 I don’t see icons, but the boxes with F046 inside. Instead of quote icons – boxes with F10D. The problem exists on most websites I see, and I don’t know how to fix it. It’s not about adding Font Awesome to my blog. It’s about seeing it on others. Could you help?
You’re probably using a very outdated browser that doesn’t support
@font-facein CSS. You have to check to see that your browser version is up to date (which it sounds like it’s not).these are fantastic, thanks Ashley!
Ah! I wasn’t aware that there’s a plugin, I tried this before manually for my social media icons and failed miserably haha. Thanks, Ashley!
This is really great plugin to spice blog posts up a bit. I’ll try it. Several icons are included in Shortcodes Ultimate plugin as well.
Very neat 🙂
I LOVE this plugin! Thank you Ashley!
Is there a way to change the color of the icon for certain posts?
You’d have to wrap another div around it and style that with CSS. Example:
In the post:
In your CSS:
.blue-icon { color: blue; }