Icons are a fabulous way to add flair and flavor to your projects. If you’re a WordPress user, and love adding icons to your projects, you’ll love Font Awesome. Released in 2017, Font Awesome is the web’s default vector icon set used by NBC News, T-mobile, Yale, TV Guide, and Gusto. Using it in WordPress is a great way to add interest and appeal to your presentations, graphics, and open-sourced projects.
Table of Contents
Font Awesome Icons
Icons are quick and easy to use, and will spice up your next print or web design project. Font Awesome has an extensive icon library, and can be used with Sketch, Illustrator, Pages, Apple Keynote, Ember, React, Angular, and Microsoft Word. Whether you’re a designer, developer, or blogger, let Font Awesome be your go-to icon tool. Watch the video below to learn how to integrate Font Awesome into WordPress:
The Many Benefits Of Font Awesome
- Desktop and web friendly
- Styling works perfectly in all browsers
- Power transforms enable you to shrink, rotate, and grow your icons
- Can be used in a variety of ways
- Rotate, mirror, stack, and align your icons with Font Awesome’s bundled styling
- Compatible with screen readers
- Great for use in presentations, demos, and open source projects
- Ideal for students, teachers, developers, and theme designers
- Completely free to use unless you upgrade to the Pro version
- Social and brand icons available
- Icons are scalable without losing quality
How To Get Started
Begin by searching for Font Awesome in your browser. You’ll see this dashboard when you come to the website. Note that the Font Awesome is open sourced and free to use for plugins, projects, and commercial themes.
Note the different icon packs:
2. See where it says “Font Awesome” in the first screenshot above? Click the black “Free” button, which will give you access to 1,341 icons. You’ll see this screen:
If you click on the box that says “Icons:,” you’ll see a staggering array of icons, and this is just for starters:
Now click the “Start Using” button. You’ll see this free CDN code that enables you to start using icons immediately without managing any files. All you have to do is place the code. You can apply code for each of the individual icon categories – solid, regular, and brands – or select the “All” tab to include them all.
Copy the style sheet code on the black bar. You’re going to want to add that to your header.php file. HOWEVER, as a word of caution, you’ll want to create a child theme for your site because the code that you’ll be adding to your editor in WordPress may be lost with the next theme update, and you’ll lose the capability to use your icons. Read my tutorial on how to create a child theme here.
Save yourself a lot of trouble, and install a child theme then you don’t have to worry about losing any functionality as the child theme remains untouched when you update your theme.
In your child theme, go to “Appearance,” “Editor,” and find your “functions.php” file. You are basically just adding a style sheet to the header of your website. Understand that with any Font Awesome update, you’ll need to apply a new code if you want to have access to the additional icons added with the latest version.
That’s it. Now you’ll have access to the vast array of icons available in Font Awesome. Just go to Font Awesome’s cheatsheet (see link below), choose an icon, and copy the code into your WordPress editor to use within any page or post.
This is the icon I chose. See the different sizes? Notice the different categories on the orange bar on the right. With the free version, I can only use the “Solid” icons. The “Regular” and “Light” icons are only available when you upgrade to Pro. Now copy the code above the icon. When you hover over it with your mouse, you’ll see the option to copy it.
Now go to a page or post on your website, and paste the code for you icon into your editor.
Refresh the page and you’ll see your icon. It’s too small so I can add more code to my editor to enlarge it.
In summary, begin by pasting the CDN code into your functions.php file if you’re using a child theme or your header.php if you’re not using a child theme. Then paste the individual code for your chosen icon into your page or post’s editor. Pretty easy, right?
How Much Does It Cost To Upgrade?
If Font Awesome Free doesn’t meet your needs, you can purchase a Pro license for just $60.00 a year. Unlock additional icons and services. You’ll be able to unlock additional icons and services with your paid subscription. You’ll also have access to Font Awesome’s technical support with a Pro membership.
The Pro license increases in $60.00 increments if you need more icons:
Font Awesome Cheat Sheet
For quick reference to all the icons offered, you’ll want to use Font Awesome’s cheat sheet. Take a look here. You might want to consider printing the sheet for convenience.
Find the icon you want to use, copy the code, and paste it into your editor where you want it to appear. Font Awesome supports both CSS and HTML.
Install The Plugin
If that whole process seems way too hard, take the shortcut method by installing a WordPress plugin. Here’s how you do it:
Go to your WordPress “Dashboard,” “Plugins,” and “Add New.” Search for “Better Font Awesome Icons.”
I always like to make sure a new plugin is compatible with my version of WordPress. Note that this plugin is compatible, has a five-star rating, and was updated just five months ago so we’re good to go. Activate the plugin. Now go to your dashboard again, and under “Settings,” you’ll see “Better Font Awesome.” Click on it.
You’ll see this screen:
I leave the settings as is. If you change them, click “Save Settings.” See how there are two sets of codes to the right of each icon? The first one is a short code that the plugin offers, and the second code is taken from Font Awesome’s website. If you’re installing the icons manually, as in the tutorial above, you’ll use the second code, but if you’re using the plugin itself, copy the first code.
Now go to the Font Awesome icon library by clicking on this link. Click on “Icons” in the menu, and you’ll be taken to a page where you can search for any of the 3,978 icons.
When you find an icon you like, click on it and you’ll see a code. Some of the icons are for Pro users only. These icons are not highlighted like the free ones so you’ll be able to determine which icons are free. After you’ve chosen your icon, copy the code.
Since we’re using a plugin, I’m going to copy the short code. Now paste it into your “Text” editor.
Save and view your page. See the coffee cup icon?
On every page and post in WordPress, you’ll see the button with the flag that says “Insert Icon.” When you press that, you’ll have access to the Font Awesome icons. Click on one or search for specific icons, and the code will be added automatically. I love this feature!
If you go back to the short code section under “Settings” and “Better Font Awesome,” you’ll see additional codes that allow you to customize your icon. I’m going to rotate my coffee cup using the code below You can actually just use the portion of the code after “coffee.”
[icon name=”coffee” class=”fa-2x fa-rotate-90″]
Paste the code into your editor. See how I have two codes? One is for the coffee cup icon itself, and the other one is to rotate it. If you want to make it bigger, you’ll need to paste a third code.
Yay! My coffee cup rotated. If you icon isn’t big enough, find the code to enlarge it.
One big advantage of using the plugin, is that the plugin will automatically be updated whenever Font Awesome comes out with a new version. I like using the plugin because it’s just a matter of copying and pasting.
I use icons in my blog posts and articles. If you’d like to learn how I got started online, read my review or click the banner below to learn more. Wealthy Affiliate is my platform of choice and is where I learned my internet marketing skills. You can create a Starter account for FREE and start investing in your financial future today!
[Read More: Is Wealthy Affiliate The Real Deal?]
Key Points
I like design tools that are free and easy to use. Font Awesome paired with WordPress is a winning combination. Download it today and have fun customizing and designing your next project!
Have you used Font Awesome? Do you have any tips and tricks you can offer? Let me know in the comments:)
This post contains affiliate links, which means I may receive a small commission, with no cost to you, if you make a purchase through a link.
Hello Holly,
Very interesting article. I have never heard of Font Awesome, and no pun intended – but it sounds awesome. You are right, using graphics in your content does help to ‘spice it up a bit”. I will be checking out this software a little closer and who knows, it might become my best buddy!
Thnx for sharing.
Michelle
Font Awesome is fun if you like adding icons to your website. Check it out. Thank you for commenting!