font awesome logo

Getting Started With Font Awesome In WordPress

Getting Started With Font Awesome In WordPress


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.

font awesome logo

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.

Font Awesome DashboardNote the different icon packs:

Font Awesome 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 will see this screen:

Font Awesome Free

If you click on the box that says “Icons:,” you’ll see a staggering array of icons, and this is just for starters:

Font Awesome Cheatsheet

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.

Font Awesome's Free CDNCopy 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.

Font Awesome american sign language icon

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.

 

click to copy code on Font Awesome icon

Now go to a page or post on your website, and paste the code for you icon into your editor.

American sign language icon code in WordPress 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.

American sign language icon in WordPress

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.

Font Awesome Pro Package

The Pro license increases in $60.00 increments if you need more icons:

Font Awesome Pro version $120

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.”

Better Font Awesome Plugin

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.

Better Font Awesome Plugin Settings

You’ll see this screen:

Better Font Awesome plugin settings

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.

Font Awesome icon page

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.

font awesome icon with code

Since we’re using a plugin, I’m going to copy the short code. Now paste it into your “Text” editor.

font awesome short code in text editor

Save and view your page. See the coffee cup icon?

 

coffee cup iconOn 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!

 

insert icon button Font AwesomeIf 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″]

Coffee cup icon rotation

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.

Font Awesome codeYay! My coffee cup rotated. If you icon isn’t big enough, find the code to enlarge it.

Rotated coffee cup Font Awesome

 

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?]

wealthy affiliate bannerKey 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 having 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:)

 

 

 

 

2 thoughts on “Getting Started With Font Awesome In WordPress”

  1. 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

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.