Interested in a fun way to make your WordPress site’s design even more appealing? Font icons let you spice up your posts, pages, or menus by including eye-catching icons. And when it comes to font icons, Font Awesome is definitely one of the biggest names out there. If you want a Font Awesome WordPress usage guide, for a huge collection of icons to your WordPress site, keep reading to learn a little more about them and two quick and easy ways to add these icons to WordPress.
Font Awesome WordPress Usage
Icons were once a major pain when building a website. You could rarely find the right ones — especially if you needed more than a couple of them to be in the same style. (Ten icons with consistent designs? Forget about it!) And even if you did find them somehow, the quality wasn’t on par if you wanted to use the icons at different sizes. Long story short, to get the right icons, you needed to design them yourself.
Over time, things improved a little, with various icon packs sprouting up here and there (marketplaces, small sites). But that still wasn’t exactly perfect. Even with those sites, you still had to go out and look for icons on your own, instead of having some kind of easily accessible library. This is where Font Awesome comes into play and where our font awesome WordPress usage guide is based on.
Once you hook your site up to Font Awesome, you can access every icon via a simple HTML tag. For example, to get this cool icon. All I need to do is use a piece of code like this:
<i class="fa fa-car"></i>
Font Awesome will take it and convert it into a live icon. And you can really customize these icons, too. You can change the sizes, colours and shades — basically, you can do anything that’s achievable through CSS. As far as you’re aware, these icons behave just like any other font. Font Awesome also gives you some unique stuff, such as the possibility to animate your icons. So, instead of a static version like this:
And this can be done with any Font Awesome icon.
Therefore, the question is:
Is It good?
In my opinion, the main strengths of Font Awesome are:
- the library is really large, currently boasting more than 630 icons
- every icon is easy to access once you integrate your site with the main library
- it’s all vectors, so you can do whatever you wish with the way the icons are displayed
- it’s very easy to add an icon anywhere.
Quite frankly, Font Awesome does what it does really well. To top it all off, there’s not much of a learning curve. Once you have Font Awesome installed on your site, all you have to do is:
- browse the available icons to get a nice overview of what’s there
- check out the examples (treat them as a quick how-to guide).
The visual quality of the icons themselves is very high as well. A common problem with many icon packs available on the web is that they tend to look good only at specific sizes, because of things such as too much or too little detail, unclear shapes, and so on. But Font Awesome icons are not like that at all. It seems they’ve been designed to work anywhere and to look great regardless of the size you want to use. Plus, let’s remember they’re all vectors, so scaling isn’t a technical problem either.
Most importantly, Font Awesome icons achieve three main goals design-wise:
- The designs are consistent from icon to icon, so everything fits together.
- The designs are very minimal, which helps the icons suit various purposes (they look especially good for navigation elements).
- The quantity becomes a quality — no matter how many icons you need, Font Awesome will be able to provide.
Okay, let’s move on to the how-to part of the review:
Font Awesome WordPress Usage
All this praise aside, let’s just see how we can use Font Awesome with WordPress. Or, rather, there’s a problem if you haven’t ever been to the ‘appearance/editor‘ section of the wp-admin. To install Font Awesome on your WordPress site, you have two options:
- Manual install
- Via plugins
And here’s the kicker: Font Awesome is one of the few cases where doing things the manual way is actually better than using plugins. Let’s sidetrack a little from our main review and show you: If you’re looking for a Font Awesome plugin, then you’ll probably stumble upon these two:
- Better Font Awesome — display Font Awesome icons anywhere in your blog content.
- Font Awesome 4 Menus — display Font Awesome icons in menus.
While both technically do their job, there are some problems. Starting with Better Font Awesome, as you would imagine, getting the functionality is simple — just install and activate the plugin (you don’t need to go to Font Awesome itself or anything). All you need is the plugin.
After the installation, you get this box in your post editing screen: Clicking on it will allow you to pick a Font Awesome icon and have it included as a shortcode. Cool.
This works most of the time, judging by the reviews. But not always. For instance, for me, it messed up my CSS totally — as in, my whole theme styling stopped working (and it’s the default Twenty Fifteen theme we’re talking about here, so nothing fancy).
Now, I’m not saying the plugin will cause these problems for you too, but you are likely to come across various issues such as this over time — especially when new versions of Font Awesome or WordPress get released. This may not be worth it. Imagine one day you update your site and your CSS goes away. How long will it take you to backtrack the issue to a specific plugin? How many visitors will see the stripped down the site in the meantime?
Now about the other plugin, Font Awesome 4 Menus. This does work and seems to be performing reasonably well. All you do is install it, and then you can add custom classes to your menu items, like so:
The classes are the same as listed in the official Font Awesome documentation. The plugin takes care of the colour of the icon to match the menu, the spacing, everything.
It’s very good if you just need Font Awesome WordPress usage for your menus, but, unfortunately, it doesn’t work if you want to display icons in content. Exhibit (a):
Essentially, as detailed here, you can do this in two different ways:
- Get the direct embed code straight from Font Awesome.
- Download the package and then upload it to your server via FTP.
Initially, I was tempted to download it and have it hosted myself, but then I realized that would only mean additional work. Granted, getting the package itself and uploading it via FTP isn’t that much work (#lazy), but then you also have to take care of keeping it updated.
When dealing with an embed, on the other hand, everything’s taken care of for you. And setting all the maintenance work aside, you also get the pack served from a CDN, which is better for performance, too.
The how-to part is very straightforward, just enter your email and get the embed code delivered to you:
Font Awesome will send you a welcome email with your embed code, plus an option to register that code, which gives you some additional perks. (Note: This is not mandatory, you don’t need to register to get the main Font Awesome functionality.)
So, once you have your code, just go to the ‘appearance/editor‘ section of your wp-admin (always make a backup of your entire site and any individual files before making any changes), and add that code in the section
<head> of your theme. This is usually in the header.php file, like so:
Note: Keep in mind that if you ever update your theme, this Font Awesome integration will disappear, and you will have to redo it. When using a child theme, however (as mentioned in a previous article), there’s no such problem.
Right after you have the embed code included, you’ve enabled Font Awesome on your site. Job did — you can now start using all the icons as you please!
As I mentioned, when getting the embed code, you’re also offered the chance to register your account with Font Awesome. This isn’t required, but I actually recommend you do it. The account is free and you get a couple of things in return:
- The ability to configure your embed.
- Some nice stats on the icons you’re using.
Something I didn’t know at first was that Font Awesome also offered a premium version of their product called Fort Awesome.
The key things to know about it:
- It has thousands of more icons. With Fort Awesome, you get loads of additional icons divided into individual sets (thematic, different design styles, etc.). This lets you satisfy all your site’s icon needs through one tool — especially if you need a very specific set of things to represent via icons.
- You can upload and use your own icons. This is cool because it allows you to upload things such as your logo, product icons, or whatever else makes sense, and add them to your Font Awesome library. The strength here is that you then get to use those icons just like any other Font Awesome icons — all your icons work consistently no matter the source.
- You get custom settings. You can set the domains where your icon kits can be used, and so on.
- You can include typefaces in your kits. You can choose from a few of the best free fonts or upload your own. This keeps your typography assets for the site all in one place.
- You get to load all of that through an optimized CDN provided via MaxCDN.
In the end, the core of Font Awesome’s premium offering is its ease of use, performance improvements, and overall easy management of all your icons and typefaces.
That being said, this premium offering is probably something that only bigger websites, e-commerce stores or thematic websites will benefit from. At the end of the day, you’ll probably only need a handful of icons on your site, and you won’t be updating them very frequently — at least if we’re talking standard WordPress blogs.
On the other hand, the likes of e-commerce stores could create custom icons for individual products, or use various icon kits to make their pages more attractive to the buyer. But it’s still all about the volume. Small product catalogues can very well do with icons created for each product manually, without Font Awesome, so they still won’t benefit much from the premium packages.
Also, it’s worth pointing out that Font Awesome premium isn’t an ‘all inclusive’ kind of package. There are additional paid icon kits (up to $50 a piece), so you may find yourself still reaching for your wallet even after you get the premium offering.
What it all comes down to is that Fort Awesome (Font Awesome premium) isn’t necessarily the best option for most WordPress blogs. I honestly believe that going with the free offer will likely satisfy your needs 99% of the time.
When it comes to premium, it’s likely a good investment only if you run a larger site that relies on visual representations of various items, products or menus and adds new elements to the library very frequently. In those scenarios, you will also benefit from Font Awesome’s CDN delivery, making your site faster in the process.
We really think Font Awesome is a great product and Font Awesome WordPress usage is recommended. Never before has it been this easy to incorporate cool, nicely designed icons into your website. You’re literally just one
<i>tag away from (nearly?) the perfect icon for whatever you want to visualize.
Font Awesome WordPress usage in a nutshell:
- Font Awesome WordPress usage free: Yes, yes, yes.
- Font Awesome premium (Fort Awesome): Meh.
- Various Font Awesome WordPress plugins: Okay, but not stunning.
And finally, let’s also emphasize that Font Awesome is a fully open source project that you can use for just about any purpose, including commercial — you neither have to pay additional fees nor ask anyone for permission. Feel free to use the comments section below if you have anything to say.