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 and Flaticon Icon Fonts are the biggest names out there. If you want a Font Awesome WordPress usage guide & tutorial for a vast collection of icons for 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 significant 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 in different sizes. Long story short, to get suitable icons, you need 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 easily accessible library. This is where Font Awesome comes into play and where our font awesome WordPress icons usage guide and tutorial 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 incredible 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 customize these icons, too. You can change the sizes, colors, and shades. You can do anything achievable through CSS. As you’re aware, these icons behave just like any other font. Font Awesome also gives you some amazing 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 icons in WordPress following the tutorial.
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 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 an excellent 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 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, etc. 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. Remember, they’re all vectors, so scaling isn’t a technical problem.
Most importantly, Font Awesome icons usage tutorial for WordPress achieves three main goals design-wise:
- The designs are consistent from icon to icon, so everything fits together.
- The designs are minimal, which helps the icons suit various purposes (they look especially good for navigation elements).
- The quantity becomes quality. No matter how many icons you need, Font Awesome can provide them.
Okay, let’s move on to the how-to part of the review:
Font Awesome Icons in WordPress Usage Guide & Tutorial
All this praise aside, let’s see how we can use Font Awesome with WordPress tutorial. Or, instead, 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 better than using plugins. Let’s sidetrack a little from our central review and show you: If you’re looking for an Awesome Font 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 (outdated) — 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. Please 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 an Awesome Font icon and include it 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. As in, my whole theme styling stopped working (and it’s the default Twenty Fifteen theme we’re talking about here, so nothing fancy).
WP Plugins Usage
I’m not saying the plugin will cause these problems for you too, but you will likely come across various issues 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 you backtrack the issue to a specific plugin? How many visitors will see the stripped-down 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 icon’s color to match the menu, the spacing, and everything else.
It’s very good if you need Font Awesome WordPress usage for your menus, but, unfortunately, it doesn’t work if you want to display icons in content. Exhibit (a):
Integration
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 and have it hosted myself, but then I realized that would only mean additional work. Granted, getting the package and uploading it via FTP isn’t that much work (#lazy), but you also have to keep it updated.
On the other hand, when dealing with an embed, 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.
Account Font Awesome WordPress Usage Guide
The how-to part is very straightforward, enter your email and get the embed code delivered to you:
Font Awesome will send you a welcome email with your embed code and an option to register that code, giving you 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, 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 article, this Font Awesome integration will disappear, and you will have to redo it. However, when using a child theme (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 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.
Why Premium?
At first, I didn’t know that Font Awesome also offered a premium version of their Fort Awesome product.
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 specific set of things to represent via icons.
- You can upload and use your icons. This is cool because it allows you to upload your logo, product icons, or whatever else makes sense and add them to your Font Awesome library. The strength is that you can use those icons 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 can load all of that through an optimized CDN provided via MaxCDN.
Performance Font Awesome WordPress Usage Guide
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. You’ll probably only need a handful of icons on your site, and you won’t be updating them frequently. At least if we’re talking standard WordPress blogs.
On the other hand, 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 catalogs 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 still reach for your wallet even after you get the premium offering.
It all comes down to 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.
Regarding premium, it’s likely a good investment only if you run a more significant site that relies on visual representations of various items, products, or menus and frequently adds new elements to the library. You will also benefit from Font Awesome’s CDN delivery in those scenarios, making your site faster.
Conclusion
We 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 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 use 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 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.
