How to Use Font Icons on Your WordPress Blog

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.

Photo of Ashley
I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

Leave a Reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

19 comments

  1. 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?

    Olga Godim recently posted: Truth about lies
    1. You’re probably using a very outdated browser that doesn’t support @font-face in CSS. You have to check to see that your browser version is up to date (which it sounds like it’s not).

  2. 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!

    1. You’d have to wrap another div around it and style that with CSS. Example:

      In the post:

      <span class="blue-icon">[icon name="fa-heart"]</span>

      In your CSS:

      .blue-icon {
          color: blue;
      }

Recent Posts

    Random Posts