WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Easily Add Icon Fonts in Your WordPress Theme

How to Easily Add Icon Fonts in Your WordPress Theme

Last updated on September 25th, 2019 by Editorial Staff
217 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Easily Add Icon Fonts in Your WordPress Theme

Do you want to add icon fonts on your WordPress site? Recently one of our readers asked what’s the easiest way to add icon fonts in their WordPress theme?

Icon fonts allow you to add vector (resizable) icons without slowing down your website. They are loaded like web fonts and can be styled using CSS.

In this article, we will show you how to easily add icon fonts in your WordPress theme, step by step.

Using icon fonts with any WordPress theme

What are Icon Fonts and Why You Should Use Them?

Icon fonts contain symbols or pictograms instead of letters and numbers. These pictograms can be easily added to website content and resized using CSS. Compared to image based icons, font icons are much faster which helps with your overall WordPress website speed.

Icon fonts preview

Icon fonts can be used to display commonly used icons. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contest, and even in WordPress navigation menus.

There are several free and open-source icon fonts available that has hundreds of beautiful icons.

In fact, each WordPress install comes with the free dashicons icon font set. These icons are used in the WordPress admin menu and other areas inside WordPress admin area.

Some other popular icon fonts are:

  • Font Awesome
  • Genericons
  • IcoMoon
  • Linearicons
  • Material Icons by Google
  • The Noun Project

For the sake of this tutorial, we will be using Font Awesome. It is the most popular free and open-source icon font available. We use FontAwesome on WPBeginner website as well as our WordPress plugins like OptinMonster, WPForms, RafflePress, etc.

In this guide, we’re going to cover three ways of adding icon fonts in WordPress. You can choose the solution that works best for you.

Adding Icon Fonts in WordPress Using Plugins

If you are a beginner level user just trying to add some icons to your posts or pages, then this method is suitable for you. You wouldn’t have to modify theme files, and you would be able to use icon fonts everywhere on your website.

First thing you need to do is install and activate the Font Awesome plugin for WordPress. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin enables Font Awesome support for your theme. You can now edit any WordPress post or page and use icon shortcode like this:

[icon name=”rocket”]

You can use this shortcode along with other text or by itself in a dedicated shortcode block.

Adding icon font shortcode in WordPress

Once added, you can preview your post or page to see how the icon will look on a live site. Here is how it looked on our test site.

Icon preview

You can also add the font icon shortcode inside a paragraph block by itself where you can use the block settings to increase icon size.

Increase icon size

As you increase the text size, this may look odd inside the text editor. That’s because the shortcode does not automatically change into an icon font inside the block editor.

You will need to click the preview button on your post or page to see how the actual icon size would look.

Icon font enlarged

You can also use the icon shortcode inside columns and create feature boxes like this:

Using icon fonts in feature boxes

2. Using Icon Fonts with a WordPress Page Builder

Most popular WordPress page builder plugins come with built-in support for icon fonts. This allows you to easily use icon fonts in your landing pages as well as other areas on your website.

Beaver Builder

Beaver Builder is the best WordPress page builder plugin on the market. It allows you to easily create custom page layouts in WordPress without writing any code.

Beaver Builder comes with beautiful icons and ready to use modules that you can just drag and drop into your post and pages.

Beaver Builder icon modules

You can create icon groups, add a single icon, and move them into well-positioned rows and columns. You can also select your own colors, background, spacing, and margin without writing CSS.

Edit icon fonts in Beaver Builder

You can even create completely custom WordPress themes without writing any code using Beaver Builder’s Themer product.

Elementor Pro

Elementor is another popular WordPress page builder plugin. It also comes with several elements that allow you to use icon fonts, including an Icon element.

Elementor icon

You can just drag and drop an icon anywhere and use it with rows, columns, and tables to create beautiful pages.

Other popular page builders like Divi and Visual Composer also have full support for icon fonts.

3. Adding Icon Fonts in WordPress Manually with Code

As we mentioned earlier that icon fonts are just fonts and can be added to your site like you would add any custom fonts.

Some icon fonts like Font Awesome, are available from CDN servers across the web and can be linked from your WordPress theme directly.

You can also upload the entire font directory to a folder in your WordPress theme and then use those fonts in your stylesheet.

Since we are using Font Awesome for this tutorial, we will show you how you can add it using both methods.

Method 1:

This manual method is quite easy.

First, you need to visit the Font Awesome website and enter your email address to get the embed code.

Get Font Awesome embed code

Now check your inbox for an email from Font Awesome with your embed code. Copy and paste this embed code in your WordPress theme’s header.php file just before the </head> tag.

Your embed code will be a single line that will fetch the Font Awesome library directly from their CDN servers. It will look something like this:

<script src="https://use.fontawesome.com/123456abc.js"></script>

This method is simplest, but it can cause conflicts with other plugins.

A better approach would be to properly load JavaScript in WordPress using the built-in enqueueing mechanism.

Instead of linking to the stylesheet from your theme’s header template, you can add the following code in your theme’s functions.php file or in a site-specific plugin.


function wpb_load_fa() {

wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Method 2:

The second method is not the easiest, but it would allow you to host the Font Awesome icon fonts on your own website.

First, you need to visit the Font Awesome website to download the font package to your computer.

Download icon font to your computer

Simply download the icon fonts and unzip the package.

Now, you will need to connect to your WordPress hosting using a FTP client and go to your WordPress theme’s directory.

You need to create a new folder there and name it fonts. Next, you need to upload the contents of the icon fonts folder to the fonts directory on your web hosting server.

Uploading icon fonts to your WordPress theme

Now you are ready to load icon fonts into your WordPress theme. Simply add this code to your theme’s functions.php file or in a site-specific plugin.


function wpb_load_fa() {

wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

You have successfully loaded Font Awesome into your WordPress theme.

Now comes the part where you will be adding actual icons into your WordPress theme, posts, or pages.

Manually Displaying Icon Fonts in WordPress

Go to the Font Awesome’s website to see the full list of icons available. Click on any icon you want to use, and you will be able to see the icon name.

Icon name
Copy the icon name and use it like this in WordPress.

<i class="fa-arrow-alt-circle-up"></i> 

You can style this icon in your theme’s stylesheet like this:

.fa-arrow-alt-circle-up { 
font-size:50px; 
color:#FF6600; 
}

You can also combine different icons together and style them at once. For example, lets say you want to display a list of links with icons next to them. You can wrap them under a <div> element with a specific class.

<div class="icons-group">
  <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
  <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

Now you can style them in your theme’s stylesheet like this:

.icons-group-item i { 
color: #333; 
font-size: 50px; 
} 
.icons-group-item i:hover { 
color: #FF6600
} 

We hope this article helped you learn how to easily add icon fonts in your WordPress theme. You may also want to take a look at our tutorial on how to add image icons with navigation menus in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

217 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

18 Comments

Leave a Reply
  1. Juan says:
    May 23, 2020 at 9:40 am

    Hi there, many thanks for suych a great explanation.

    But I don´t understand something.

    On the wp_enqueue_style() function, the first parameter is a string called ‘wpb-fa’. I looked on the documentation and it is supposed to be the name of the stylesheet. But I don´t understand. What is this name for? Is mandatory to be named that way in this case? The stylesheet isn´t named “style.css”?

    Sorry for the noob questions.

    Thanks

    Reply
    • WPBeginner Support says:
      May 26, 2020 at 3:45 pm

      The wpb-fa is the unique name for the script, that section is not for the name of the stylesheet

      Reply
  2. M. Hridoy says:
    Oct 14, 2019 at 1:59 pm

    Hi,
    This is Great! Thanks for your awesome resourceful worth reading post.Indeed a timely and useful post which I could pick up some valuable information on this subject. Keep updating new suggestions with us…

    Reply
    • WPBeginner Support says:
      Oct 15, 2019 at 9:49 am

      Thank you and you’re welcome :)

      Reply
  3. drkumar kumar says:
    Sep 26, 2019 at 3:58 am

    nice article , thanks for sharing

    Reply
    • WPBeginner Support says:
      Sep 26, 2019 at 10:48 am

      Thank you, glad you liked our article :)

      Reply
  4. Niranjan G Vala says:
    Jun 27, 2018 at 10:19 am

    Hello wp beginners support team, I am visually impaired web designer.
    Have read this whole artical but still want some help regarding integrating the font icons in my website.
    I want to use Font Awesome with my theme. and already followed the steps provided above in artical.
    The icons are working in post and pages vary fine but i want to use it in menus.
    Here what I have done with css.

    .shoppingcart::before {
    font-family: FontAwesome;
    content: “\f07a”;
    color: #ffffff;
    }

    But still it didn’t worked. Then what I have done wrong?
    Please assist me out of this problem.
    I will always appreciate.
    Vary Thank you all at wp beginners.

    Reply
    • WPBeginner Support says:
      Jun 27, 2018 at 10:05 pm

      Hi Niranjan,

      An easier way to add Font Awesome is to add its CSS classes to invidual menu items. After enqueuing font stylesheet.

      Go to Appearance » Menus page and click on Screen Options button. From there make sure that CSS Classes check box is checked.

      Next click to expand an individual menu item and you will notice the option to add CSS classes. Each font-awesome icon has its own CSS class for exmaple, fa fa-lg fa-home CSS classes will be used for home icon. You can find them all on Font Awesome website.

      After adding CSS class you can use those classes in your custom CSS to style the icons.

      Reply
      • Niranjan G Vala says:
        Jul 1, 2018 at 7:13 am

        First thanks to all at WP Beginners for your valuable response. And sorry for late feedback. Unfortunately I was not able to reply quickly because the mail was in the spam folder. Now it works fine and i’m able to use font awesome in navigation menus.
        One suggestion is that please mention the accessibility level of plugins/themes when you post an artical. WordPress core is fully accessible but 60% of plugins and themes are not following the web accessibility guidelines (WCAG 2.0) witch is the recommendation of world wide web consortium (w3.org). Or please add skip links on your website for better accessibility. Making websites accessible will help lot to persons with disabilities like myself to navigate the website lot easier. Thanks.

        Reply
  5. ripon says:
    Mar 17, 2018 at 11:35 pm

    in a website there should have font awesome icon. I want to make that dynamic. I want to change that icon from wordpress control panel. like why choose us section there should have responsive design font icon. I want to change that from wordpress theme option.

    Reply
  6. Tobias says:
    Jun 1, 2017 at 6:42 am

    Hi, awesome tutorial, thank you!
    Can you help me?
    I used this line of the code “-o-transform: scale(1);” to scale my icons in Opera properly, however it didn’t help me. Maybe it is because of specifically these icons, that I am using –
    Is it possible that something is wrong with them? What do you think? And thanks for your tutorial!

    Reply
  7. valldahi says:
    Jan 10, 2017 at 6:52 am

    Thank you very much Isy. methode 1

    Reply
  8. Nrusingh Pr Acharya says:
    Dec 31, 2016 at 3:01 pm

    Thanks for this method. I inserted FA manually because better is not in support anymore with WP v4.7.

    I am following your tutorials from first, and I’m pretty much confident in WordPress now. Thanks.

    Reply
  9. zeniwo says:
    May 22, 2016 at 1:08 pm

    A very informative article , it really helped me in clearing my doubts about adding icon fonts in wordpress themes . Bloggers like you help hundreds of new and budding bloggers like me to understand things and move ahead . Thank you very much for this useful article.

    Reply
    • WPBeginner Support says:
      May 22, 2016 at 10:59 pm

      Glad you found it helpful :)

      Reply
  10. Rhonda says:
    Apr 22, 2016 at 5:37 pm

    Thank you! I’ve been trying to understand how to use the font icons and this was straight forward and helpful.

    Reply
    • WPBeginner Support says:
      Apr 24, 2016 at 3:45 pm

      Glad you found it helpful :)

      Reply
  11. Kobe says:
    Dec 24, 2015 at 10:57 am

    Thanks for this post. It was really useful. I’ve been using Better Fonts Awesome plugin and it helped me much. But then I needed to form my content into responsive columns and I started to search for plugin that will allow me to do that. Accidentally I came across MotoPress Editor. Actually I do not like visual editors due to dependency on them but it saved me as I could form the columns visually and use Font Awesome Icons, selecting sizes and colors easily. Thank you again for good job.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Photocrati Coupon
Get 20% off on Photocrati premium photography theme for WordPress.
WP Business Reviews
WP Business Reviews Coupon
Get 15% OFF on WP Business Reviews plugin for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.