Facebook Twitter Instagram
    Facebook Twitter YouTube
    AlienWP
    • Home
    • About
    • Contact
    • Sections
      • Collections
      • Guides
      • HowTo
      • WordPress Themes
      • WordPress Plugins
      • Hosting
      • News
    AlienWP
    Home»Guides»How to Add Font Awesome Icons to WordPress – The Complete Guide
    Guides

    How to Add Font Awesome Icons to WordPress – The Complete Guide

    Colin NewcomerBy Colin NewcomerJuly 4, 2017
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    How to Add Font Awesome Icons to WordPress
    Share
    Facebook Twitter LinkedIn Pinterest Email

    Want to add Font Awesome icons to WordPress? Icons help add style and usability to your WordPress site. And of the many font icon collections out there, Font Awesome is one of the absolute best.

    But unfortunately, you can’t just jump in and start using Font Awesome icons on WordPress right away. Instead, you’ll need to complete some setup steps before you can insert icons.


    WPEngine Promo Discount Code Exclusive WPEngine Coupon Code for AlienWP Visitors!
    Get 5 Months Free & 30% Off All Plans.
    Click the coupon code to copy and open the link »

    Click Here for Deal


    That’s what this guide is all about. When you finish reading, you’ll know exactly how to:

    • Manually add the Font Awesome stylesheet to WordPress
    • Add Font Awesome to WordPress with a free plugin
    • Insert and style Font Awesome icons in a variety of different ways

    Let’s dig in…

    Why You Should Take the Time to Add Font Awesome Icons to WordPress

    Font Awesome icons are awesome because, as the name suggests, they’re an icon font, rather than images. That means you can do cool things like:

    • Resize without losing quality because the icons are vectors
    • Change colors, add animation, and use other CSS manipulations

    All that to say, Font Awesome icons are far superior to just using a static image.

    First, I’ll show you two different ways to add them to your site. Then, I’ll show you how you can style and manipulate your icons (no matter which method you choose).

    How to Manually Add Font Awesome Icons to WordPress

    If the thought of digging into your theme’s code scares you, I recommend that you skip ahead to the next section where I’ll show you how to add Font Awesome icons to WordPress using a free plugin.

    Otherwise, I like this method for a nice, lightweight way to get Font Awesome up and running.

    Basically, all you need to do is add the Font Awesome stylesheet to your WordPress theme. Then, you can start inserting Font Awesome icons and styling them however you’d like.

    Here’s how the whole process works, step by step:

    Step 1: Enqueue Font Awesome Stylesheet in Your WordPress Theme

    Like I said, your first step is to add the Font Awesome CSS stylesheet to your WordPress theme. While you can get this directly from the Font Awesome website, my preferred method is to use the version hosted on Bootstrap CDN.

    Currently, that link is:

    https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

    But it will change as Font Awesome releases new versions. So it’s a good idea to semi-regularly update the link to the latest version (though older versions will continue to work).

    To add this stylesheet to WordPress, you need to enqueue it in your child theme’s functions.php file. While the basic method of adding CSS is to put the link in your header, it’s a best practice to use the special WordPress enqueue function instead of putting the stylesheet directly in your header.

    Additionally, using a child theme ensures that your changes don’t get overwritten if you ever need to upgrade your theme.

    Because following WordPress code best practices is a good thing, I definitely recommend you use both a child theme and the enqueue function.

    Ok, here’s how to do it:

    Go to Appearance → Editor and select the functions.php file for your child theme.

    Then, paste in this code:

    add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
    function enqueue_load_fa() {
    wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
    }

    add Font Awesome to WordPress

    Make sure to save your changes and you’re finished! Not too painful, right?

    Step 2: Insert Font Awesome Icons

    Once you’ve enqueued the stylesheet, you can insert Font Awesome icons into your site by going to the Font Awesome icon search and finding an icon that you want to insert:

    When you click on an icon, Font Awesome will give you the code that you need to use the icon:

    All you need to do is place that code in the Text tab of the WordPress Editor to add an icon to your site.

    And that’s it! You’ve successfully added Font Awesome support to WordPress. Now, all that’s left is to learn how to style Font Awesome icons on your WordPress site.

    But before I show you that, I want to go over the plugin method for adding Font Awesome Support. Feel free to skip ahead if you went with the manual method over the plugin method.

    How to Add Font Awesome Icons to WordPress With a Plugin

    If you’d prefer to use a plugin instead of manually enqueuing the Font Awesome stylesheet, there’s a solid free option listed at WordPress.org called Better Font Awesome.

    In addition to always adding the latest stylesheet to your site, Better Font Awesome also:

    • Lets you use shortcodes to embed Font Awesome icons.
    • Gives you a drop-down menu in the TinyMCE Editor to insert icons.

    If you’re planning to regularly use Font Awesome icons, these two tools might make your life easier. But for infrequent usage, I think the manual method is the simplest option because it’s the most lightweight.

    Step 1: Install and Activate the Plugin

    To add Font Awesome, all you need to do is install and activate the plugin. There’s really nothing else.

    While there is a basic settings panel that you can access by going to Settings → Better Font Awesome, you’re totally free to leave everything as the default.

    Step 2: Insert Font Awesome Icons

    To insert Font Awesome icons with the plugin, you have two different options:

    • Use the code from Font Awesome’s website like I demonstrated in the previous section.
    • Use shortcodes, which can be generated from a drop-down.

    Because I already showed you the first method in the previous section, I’ll just give you a quick look at the drop-down shortcode generator.

    When you go to create a new post or page, you’ll notice a new Insert Icon button next to the Add Media button. If you click on it, you’ll see all the available Font Awesome icons, as well as an option to filter the results:

    All you need to do is click on your chosen icon and the plugin will insert the proper shortcode:

    Add Font Awesome Icons to WordPress

    And that’s all there is to it!

    Now that you have Font Awesome icon support, let’s dig into some ways in which you can style and manipulate your Font Awesome icons.

    How to Style Font Awesome Icons and Change Sizes

    No matter which method you used to add Font Awesome to WordPress, you’ll use the same basic principles to style your icons.

    Additionally, these commands work whether you’re using shortcodes or the embed code from Font Awesome’s site.

    Most of these tips are pulled straight from the Font Awesome examples page, so you don’t need to worry about compatibility.

    Change the Size of Font Awesome Icons

    Let’s start with a basic one – increasing the size of your Font Awesome icons. By default, the icons are fairly small, so this is definitely a situation you’re likely to encounter.

    To increase an icon’s size, you can use any one of these modifiers:

    • fa-lg – increases size by 33%
    • fa-2x – doubles size
    • fa-3x – triples size
    • fa-4x – …
    • fa-5x – …

    To use those modifiers, you just add it after the name of the icon (but inside the quotes) for the code, and inside the class quotations for the shortcode. Here’s an example of tripling an icon’s size for both embed methods:

    • <i class=”fa fa-download fa-3x” aria-hidden=”true”></i>
    • [icon name=”download” class=”fa-3x“]

    For example, this:

    Becomes this on the front-end:

    Rotate Font Awesome Icons

    You can also easily rotate Font Awesome icons to change their orientation.

    Here are the modifiers for rotation. You can use any of these exactly the same as the size modifiers above:

    • fa-rotate-90 – rotates 90 degrees
    • fa-rotate-180 – rotates 180 degrees
    • fa-rotate-270 – rotates 270 degrees
    • fa-flip-horizontal – flips the icon along its horizontal axis
    • fa-flip-vertical – flips the icon along its vertical axis

    Add Animation to Font Awesome Icons

    You can also add some basic animations to your icons. Font Awesome gives you two different modifiers to add rotations:

    • fa-spin – adds a smooth rotation
    • fa-pulse – makes the icon rotate in 8 different steps

    These animations are best paired with circular icons. If you use other oddly shaped icons, the effect might look a bit weird.

    Change Font Awesome Icon Color

    Finally, I’ll show you how to change the color of Font Awesome icons. Unfortunately, there are no built-in modifiers for this. Instead, you’ll need to use some custom CSS.

    Don’t worry, though – it’s super simple.

    All you need is this little code:

    .fa-NAME {
    color: COLOR;
    }

    Where fa-NAME is the actual name of your icon and COLOR is the color you want to change it to.

    To stick with the download icon from our previous examples, here’s how you would turn it red:

    You can easily add custom CSS by going to Appearance → Customizer → Additional CSS.

    Wrapping Things Up

    Font Awesome icons might take you a couple of minutes to set up. But once you have them installed, they’re there for good. From then on, all you need to do to insert and style individual Font Awesome icons is follow the steps above.

    Just be aware – if you use the manual method, you’ll want to periodically go in and update the link to the stylesheet to stay abreast of the latest versions.

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Colin Newcomer
    • Website

    Colin Newcomer is a freelance writer for hire with a background in SEO and affiliate marketing. He helps clients grow their web visibility by writing primarily about digital marketing and WordPress. You can hire him to write for your website.

    Related Posts

    How to Import / Export Your WordPress Gutenberg Blocks

    February 9, 2020

    Beginner’s Guide to The WordPress Gutenberg Editor: Complete Review

    February 5, 2019

    Best Hypnosis Downloads: Improve Your Productivity, Health & Finances

    January 16, 2019

    How To Translate A WordPress Plugin In Your Language

    August 7, 2018

    11 Comments

    1. Collin Helmers on November 10, 2017 2:39 pm

      Thanks for the awesome tutorial! Just had one recommendation to make. In order to avoid ever having to update FontAwesome after enqueueing it in the theme’s functions, I used the link http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css that always goes to the latest version. Might be worth putting that in here. Thanks so much!

      Reply
    2. Dipendra on April 14, 2018 5:26 am

      Thanks, Boss!! You did an awesome job for me.

      Reply
    3. Jai singh on October 8, 2018 6:40 pm

      hello sir, i applied to my website https://mannequin-manikin.com but still not working..
      please help

      Reply
    4. The Fuel on October 8, 2018 6:41 pm

      ok done. . . thanks.

      Reply
    5. TalksInDepth on October 19, 2018 7:10 pm

      Nice Post! this will definitely help me to customize my site awesomely.

      Reply
    6. lisa on November 29, 2018 3:47 pm

      a nice share thank you worked..

      Reply
    7. Hank on March 19, 2019 4:35 am

      You skipped the most important section, “How to do it”

      In step 1, right after you say “Ok, this is how you do it” you did not mention the steps to create the child theme. Could you please add that? I’m not finding a better solution so it’s so good so far, just need that extra step. Thanks.

      Reply
    8. Quy on July 20, 2019 4:26 am

      thanks very much

      Reply
    9. Kehinde. Adeoya on March 30, 2020 8:55 pm

      Thanks. This is very awesome!

      Reply
    10. indira on July 7, 2020 9:28 am

      Hi, absolutely got tons of value from your post. Please i have 2 quick questions.
      1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
      2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
      Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

      Reply
    11. Wally on October 7, 2021 3:24 am

      This was an awesome guide that was easy to follow. I will definitely install the Better Awesome plugin today! Thanks for sharing this!
      https://learnanet.com/siteground-growbig-review/

      Reply

    Leave A Reply Cancel Reply

    Latest
    Video

    Best Summer LUTs (Free & Paid) Hottest Color Grading for a Sizzling Summer

    By Oliver DaleMarch 27, 2023

    Summer is the perfect time for capturing and sharing memories with family and friends. Whether…

    Best Vintage LUTs (Free & Paid) Give Your Videos a Retro Vibe

    March 21, 2023

    Best Cinematic LUTs (Free & Paid) for Show-Stopping Visuals

    March 16, 2023

    1000+ Best Lightroom Presets: Ultimate Collection!

    March 16, 2023
    About

    Welcome to AlienWP!
    A blog about WordPress, Design, Technology & Productivity.

    Coupon Codes
    • WPEngine Coupon Code
    • Elegant Themes Coupon Code
    • Media Temple Coupon Code
    • Template Monster Coupon Code
    • Tesla Themes Coupon Code
    • Bluehost Coupon Code
    • CSSIgniter Coupon Code
    • Dreamhost Coupon Code
    • Engine Themes Coupon Code
    • Flywheel Coupon Code
    • InkyDeals Coupon Code
    • Inmotion Hosting Coupon Code
    • Liquidweb Coupon Code
    Social
    • Facebook
    • Twitter
    • YouTube
    About

    AlienWP themes and plugins rely on core WordPress functionality to achieve speed, seamless integration and simplicity of use.

    You won't find bloated options and admin panels here: Only the award-winning, intuitive interface we all know and love.

    • About Us
    • Terms & Conditions
    • Privacy Policy
    • Contact Us
    • Best WordPress Hosting
    • Hosting Reviews
    Recent Posts
    • Best Summer LUTs (Free & Paid) Hottest Color Grading for a Sizzling Summer
    • Best Vintage LUTs (Free & Paid) Give Your Videos a Retro Vibe
    • Best Cinematic LUTs (Free & Paid) for Show-Stopping Visuals
    • 1000+ Best Lightroom Presets: Ultimate Collection!
    • 250 Free Lightroom Presets: Ultimate Categorized Collection for Photographers
    • Monarch Social Sharing Plugin Review: Get More Shares & Follows
    • 10 Best WordPress Membership Plugins 2020: In-Depth Guide to Free & Paid Options
    Coupons
    • WPEngine Coupon Code
    • Elegant Themes Coupon Code
    • Media Temple Coupon Code
    • Template Monster Coupon Code
    • Tesla Themes Coupon Code
    • Bluehost Coupon Code
    • CSSIgniter Coupon Code
    • Dreamhost Coupon Code
    • Engine Themes Coupon Code
    • Flywheel Coupon Code
    • InkyDeals Coupon Code
    • Inmotion Hosting Coupon Code
    • Liquidweb Coupon Code
    Facebook Twitter YouTube

    Copyright © 2013 - Kooc Media Ltd. All rights reserved. Registered Company No.05695741
    Our Sites: FlowPresets / GardenBeast / GolfMonster / Blockonomi / Money Check / Vinjatek / BoatingBeast / Beanstalk

    Type above and press Enter to search. Press Esc to cancel.