Font Awesome is awesome and you’re in luck if you landed here wanting to find out how to add Font Awesome to your site. It allows you to add beautiful, scalable icons to your WordPress website, while allowing you to treat them as a font! This means that you can change their color, size, line-height, font-weight, and even add special effects like rotate and spin! Oh, and you can totally superimpose two icons on top of one another. Yeah, awesome.
Here’s a quick how to guide on installing Font Awesome 4.0:
1. Add the Font Awesome Icon Catalog
option 1 – Bootstrap CDN This option will rely on the Bootstrap CDN (content distribution network) to load the Font Awesome CSS stylesheet from an external server. It is the easiest method of installation, but depends on another site to load the file and may slow your site load speed. Simply add this code to the header.php file:
<?php
wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
?>
immediately beneath the <head> tag. Save the file and now you’re ready to use the icons!
option 2 – Self Hosted CSS Stylesheet This option requires that you download the Font Awesome CSS stylesheet, add it to your server via FTP, and call the file pathway correctly in order to utilize the new font. This method doesn’t depend on an external source to load and depends only on your server speed. First, download the latest version of the stylesheet and unzip it. Then, FTP to your server and upload the new folder to /wp-content/themes/your-theme. Finally, place this code into the header.php file :
<?php
wp_enqueue_style('font-awesome', get_template_directory_uri().'/font-awesome/css/font-awesome.min.css');
?>
Immediately beneath the <head> tag. Make sure to use the correct file path. Save the file and now you’re ready to use the icons!
2. Add Icons
Font awesome uses a very simple method for implementing a new icon using HTML.
<i class="fa fa-camera-retro"></i>This is the most basic icon that you can output. The ‘fa’ identifies the code as an icon, while the ‘fa-camera-retro’ pulls the actual icon image. They have over 360 icons to choose from, so you’ll be able to find the one you’re looking for. Check out additional examples to see how you can increase the size, add a spin, and even superimpose them!
There you go! You’ve now added Font Awesome and all its muscle to your site. Let me know if you have any questions below.
You’re doing it wrong.
The script should be enqueue. We publshed the same tutorial few weeks ago.
Hey Rudd – Thanks for the note. I’ve informed Monty (author) and he’ll update the article accordingly. Thx and great site you have.
Thanks for the tip, consider this post updated.
Thank you for the simple instructions… Now to dive in! Thanks again! Bryan Ring
Bryan – I’m glad we were able to help you! Our mission is to make the WordPress World a better place!