Font Awesome allows you to add scalable icons to your website. I use it on my own website because sometimes outside of using images, the icons add a nice personal touch. It’s free, and GPL, and can event be used commercially. In this article, I’ll be showing several methods on how to add Font Awesome to your WordPress site.
The reason why I have several methods is because you, the reader, may have a specific way you prefer to implement new things to your website.
How to Add Font Awesome to your WordPress Site – Using their CDN #1
At Font Awesome, they have a nice little write up on how to implement this using their chosen CDN. This means that you’re allowing them to host the files and you just need to include something on your website so the fonts will work. Their directions can be found here.
This method is simple and only requires you to add the following line to the header section of your site, between the head tags
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
How to Add Font Awesome to your WordPress Site – Using their CDN #2
Add the following to your theme’s functions.php file.
//* Enqueue Font Awesome
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );
function yourtheme_enqueue_scripts() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}
Note- Choose 1 of the methods listed above, not both, if you choose to rely on their chosen CDN. Also note that in using their CDN, because the service is popular, you could run into a time where the icons may be slow to load, or may not load at all.
How to Add Font Awesome to your WordPress Site – Hosting it In-house
1. Download from – http://fortawesome.github.io/Font-Awesome/.
2. Unzip folder and extract files to your computer.
3. Load files to your web hosting account. I use the directory named /fonts for all my fonts, so I’ve created a subdirectory called /font-awesome. The directory path in my theme folder ends up being /fonts/font-awesome. I do this because I also host my own fonts in-house using the @font-face method for WordPress. Upload the folders and files to that directory.
4. Add the following to your functions.php of your theme.
//* Enqueue Font Awesome
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );
function yourtheme_enqueue_scripts() {
wp_enqueue_style( 'font-awesome', get_bloginfo( 'stylesheet_directory' ) . '/fonts/font-awesome/css/font-awesome.css', null, '4.3.0' );
}
How to Add Font Awesome to your WordPress Site – Using a plugin
There are a few plugins available, but Better Font Awesome WordPress plugin made the cut on actually working. All you have to do is install, activate, and use the shortcodes.
Below are some screenshots. You can click on them, and they should open into a lightbox so you can view it better.
In using the plugin, it is set up to use their CDN. If you don’t want to use the CDN, then using the in-house hosting method will do. You will just need to update from time to time since more scalable icons are added.
There’s a few other methods listed on the Font Awesome’s Get Started page, that uses LESS Ruby Gem and SASS Ruby Gem, and Custom LESS or SASS. I mention this because I know I have a few devs that read and like those methods better.
Once you’ve implemented the files using one of the methods above, except for the plugin method, you can use the code from any one of the 519 scalable vector icons available.
For example, if you want to use an icon like the life ring that usually is used to symbolize ‘help’, and looks like , simply use:
<i class="fa fa-life-ring"></i>
You can also increase the size using their examples, change the color using CSS, and much more.
Have you used Font Awesome? If so, which method have you implemented for your own website?
Well, that’s neat! I’ve always wondered how people get those extra fonts and symbols into their blogs. Thanks!
Thank you for sharing this, I’ve always wondered how others have cool fonts and how to add them. You’ve explained it so well that even I think I could add font awesome to my site.
I had never heart of font awesome before this post! I am one of those people who will pay someone else to do these things! Thanks for sharing!
I love icons and no doubt, they help make blogs look not-so-stiff and like what you said, more personal. I’m on a different blogging platform though but I’ll check if there’s a way for me to use font awesome. Thank you for this tutorial. I’ve bookmarked it in case I switch platforms in the future.
Is there an advantage to adding code to your site instead of just using the plugin? Either way, it sounds like a great feature.
The advantage depends on how you implement it code-wise. If you host it in-house, then you never have to face a 3rd party service going down or getting sluggish. Also, this helps with cutting down outside resource calls, which is good for website speed. Some plugins for Font Awesome may end up using the CDN that Font Awesome allows people to use.
I always download new and cool fonts for my website. It makes it more appealing…
This is super cool, playing around with new fonts is fun!
I haven’t tried font awesome just yet but since I am getting curious about this, I want to try and check out its awesomeness. I don;t use WordPress though, how can I use this to blogger platform?
One of the many reasons I cannot wait to change my blog over to wordpress. You can just customize so much more than you can on blogger.
I had never heard of font awesome until now. It sounds pretty neat though, so I will have to check it out myself now!
Excellent post sharing how to get and install fonts – I was trying to find a better solution – thank you 🙂
I hear WordPress is a great way to go. I am on the fence but I love reading about it just in case.
That’s one of the many advantages of having a wordpress site, you can install cool tools and application. Unfortunately, all my blogs are hosted with Blogger coz am not that techie.
There are so many great fonts out there. I’ve been blogging since 98ish and if there is one thing that still remains true today, just because a font is pretty to you doesn’t mean its pretty to your readers or that they have an easy time reading it.
Icons do make your blog stand out! I have thought about this plug in for my blog, but I wasn’t sure exactly what it did. Thanks for the explanation and tutorial!
I am relatively new to blogging and am still overwhelmed by even the simplest functions. Adding extras like this is way over my head. But maybe some day …
Hi Nile, I haven’t used this yet – looks good though, if I do use it, I’ll choose the first method, it looks the easiest to me, and saves having 1 extra plugin.
I like to have a lot of variety in the presentation of my posts, especially when it comes to fonts. This might be something to look into for the future.
The nice color scheme has really good effect on the readers as it creates more curiousity.
I am fairly new to WordPress, so this was a very helpful post. I love this font and you made is super easy to get it on my site!
I need to try this out. I like to add different font weights to draw attention to certain parts of my post, but this might be a better idea
This is the first time that I’ve heard of Font Awesome. We’re just new on WordPress so I’m still trying to learn about the different plugins. Will check this out.
Great tips. I am really tired of the font on my blog but I don’t want to download google fonts, yuck!
Man, I wish I had your knowledge and skills in regards to graphic/site design. I find it to be the most time consuming aspect of blogging for me -_-
I like the set up I’ve got now but my header needs a fix up, that’s for sure. Baby steps for me and I put it off until a day when I’ve got a few solid hours to tinker with design.
Font Awesome is something I’ll have to look into.
This is some great information! Thank you so much for sharing how to do this!
I haven’t used font awesome, and thank you for sharing . I would use the plugin instead of the other methods, its much easier for me. It sounds an awesome font to use in a website.
HI Sophosith! Cool… if you use the plugin, I hope you enjoy it. I had to share the plugin method as I’ve been trying to make sure some of my readers who don’t like to touch code, will have an option. 🙂
I love WordPress plugins to use on my own as well as client’s sites. Font Awesome sounds like another great one to add to my arsenal. Thank you for pointing it out!
Thank you Nile for this post! I wondered how people got such neat icons on their website. I tried the first and third way and decided I am going to go with the code instead of the plugin. I think it is great you show more than one way to install it.
@Nile Flores
Nice post ! i am new on wordpress. i was try to change font in my site. your post help me to learn how to change font in wordpress
Regards
Rosy