If you want to put some additional flare on your WordPress content through custom icons then you have a couple of options: (1) either buy good icons from somewhere (or acquire them in another way … freebies, icon packs, etc.), or (2) use Font Awesome.
Here’s how:
What is Font Awesome?
In most simple terms, Font Awesome is an icon font. This means that instead of letters, numbers and other characters, you get icons.
This sort of solution has a couple of neat advantages:
- You don’t need to deal with icons themselves – as in, graphics files that might not want to cooperate with you.
- The icons behave just like any other font – this means that you can set them to be of any size, and also style them freely through things like CSS.
- No matter the size of the icon that you want to use, it will always look great. Technically speaking, those icons are vector graphics – this is what makes them infinitely scalable.
- The whole thing is free.
In essence, using Font Awesome on a daily basis is really easy to grasp (more on that in a minute), and you don’t need any design experience under your belt to do so.
When it comes to the size of the Font Awesome icon library, it’s actually quite impressive. You get more than 630 icons that represent all kinds of different things. From currency, to transportation, weather, file types, app icons, text editor icons, and much more.
Also, one cool feature is that you can animate any of the icons. For example, you can take the standard cog icon and make it spin – handy for visualizing a process happening in the background.
Okay, onto the main question:
How to install Font Awesome on WordPress
Like with most things WordPress-related, there are a couple of plugins that you can use to get some Font Awesome functionality working on your blog.
That being said, none of those plugins (at least the free ones) really stand up to the task. So this is actually one of the few cases where integrating Font Awesome with WordPress by hand is better than doing so with plugins.
To begin, simply go to the official getting started page. There, you can either download the Font Awesome package directly (fig. a), or submit your email address, which will get you access to the Font Awesome embed code (fig. b).
Fig. a
Fig. b
I urge you to go with the latter – get the embed code from Font Awesome, instead of downloading the package.
You’re getting a couple of benefits if you do it this way:
- You don’t have to host the Font Awesome package on your own server. It’s just fetched directly from Font Awesome’s servers. (Font Awesome actually uses a CDN for this, so it’s super fast.)
- You get all the updates automatically. (If you were to download the package, you would have to then update it manually, too.)
After you submit your email, Font Awesome will send you your own personalized embed code. So all you need to do is include it in the head section of your current theme.
Two alternative ways to do that:
- (a) Check with your current theme’s settings page to see if there’s a possibility to add something to the theme’s
head. Some themes have options like that. So if yours does, feel free to use it – input the Font Awesome embed code there. - (b) Go to your WordPress dashboard, and then to Appearance > Editor. Select the header.php file of your theme, and add the Font Awesome embed code somewhere in the
headsection by hand. Like so:
Congrats because you’ve just integrated your WordPress blog with Font Awesome!
How to use Font Awesome in WordPress
Now that you have Font Awesome installed, the only thing left is learning how to use it in your posts, pages, or even menus and UI elements.
If you want to include a Font Awesome icon in a blog post, for example, all you need to do is, first, pick a specific icon (here’s the complete library), and then add it to the blog post like this: <i class="fa fa-camera-retro"></i> (use the Text editor, not the Visual editor).
That short piece of code will give you this result:
(Go here for more usage examples.)
Basically, there are no limits, and you can use Font Awesome wherever you see fit. Here are the licensing details as stated by the Font Awesome team themselves:
Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.