How to Remove Font Awesome from WordPress Theme – 2024

Remove Font Awesome from WordPress theme, it will help you to get higher score on Google PageSpeed Insights and improve page loading speed.

Updated on

In this post, I will discuss the reasons why you may want to disable Font Awesome; and provide step-by-step instructions on how to remove Font Awesome from WordPress themes and plugins for faster performace.

Nowadays, Font Awesome is widely used in WordPress themes and plugins to enhance the visual appeal of websites. However, there may be situations where you want to delete Font Awesome on your website.

I recently encountered the warning to Eliminate render-blocking resources because of the Font Awesome javascript file during the testing of one of my client’s websites on Google PageSpeed Insights.

But before we dig into the details, we must discuss why you should Remove Font Awesome from your WordPress Theme and how Font Awesome affects your site performance.

Remove Font Awesome from WordPress Theme
Remove Font Awesome from WordPress Theme

What is Font Awesome

Font Awesome is a popular icon library that provides scalable vector icons that can be easily customized with the use of CSS. It was created by Dave Gandy in 2012 and has since become one of the most popular icon libraries on the web.

As the name suggests, the icons look really awesome and they can be easily integrated into WordPress themes and plugins to add icons to various elements such as menus, buttons, and widgets. You can change the size and color of icons, add a drop shadow or use animated loading icons, etc. 

Reasons Why You Should Remove Font Awesome

  • You don’t need the additional icons that Font Awesome provides because they are unused icons.
  • Use alternative icon libraries, custom icons, or SVG icons.
  • Improve the performance of your website by reducing the number of HTTP requests and page size.

There could be several more reasons why you may want to delete Font Awesome from your WordPress site. However, here my focus is to eliminate Font Awesome’s impact on website performance in order to maintain optimal loading speed.

Font Awesome’s Impact on Website Performace

The impact of Font Awesome on WordPress sites is mainly related to performance. When Font Awesome is loaded, it adds additional HTTP requests and increases the page size, which can slow down the page load time. This can have a negative impact on user experience and SEO.

The latest version of FontAwesome version 6.4.0 has a wide variety of 26k+ icons across 8 styles and 68 categories and most of the time we only use a few icons out of that for social sharing buttons, navigation buttons like menus, post meta, etc.

There are two common ways to use Font Awesome icons on your website since version 5: SVGs and Web Fonts. Only Web Fonts files can be used in previous versions, such as Font Awesome v4.

When you implement Font Awesome on a site using Web Fonts, it loads one CSS file of 93 kb (i.e. font-awesome-all.css) and one web font file of 408 kb (i.e. fontawesome-webfont.woff2). Similar to this, if you use their SVG + JS framework, it loads an additional, 4-kb JS file and replaces the web font file with SVG icons.

PageSpeed Insights Warning for FontAwesome CSS and Woff2 files
Page Speed Insights Warning for FontAwesome CSS and Woff2 files

Font Awesome Performace Test

I tested the “Get Started” page for the Font Awesome website using PageSpeed Insights and GTmetrix to determine the effect of Font Awesome on website loading speed, and the results were startling.

Font Awesome PageSpeed Insights Result
Font Awesome PageSpeed Insights Result

It took 3.1 seconds to completely load the 3.40 MB page.

According to PageSpeed Insights, removing Font Awesome’s JS and CSS files could result in a potential time savings of about 0.8 seconds. Let’s assume that the web font file took 0.2 seconds time to load. By removing font awesome, we can reduce loading time by about 1.0 seconds.

The revelation is crystal clear – Font Awesome (files) took up a significant chunk of the website’s loading time, accounting for approximately 30% (1 second) of the total loading time that clocked in at 3.1 seconds.

Please take note that the outputs of similar tests can vary depending on numerous variables, including but not limited to the testing location, internet speed, and the source of font files (whether it’s from the same server or a CDN). All of these elements have an impact on the loading time of a website, resulting in each case being unique in its own way.

I would recommend you also test your website on speed testing tools to measure the impact before drawing any inferences.

So, Font Awesome icons affect your website and increase website loading time. As per the industry standards, your website should load in less than 1.0 or 1.5 seconds. Google also prefers websites with small loading times, in search results.

Now, it is totally up to you whether you want a fancy website with icons and all or you want a faster-loading website.

How to Remove Font Awesome from WordPress Theme

There are multiple ways to Remove Font Awesome from WordPress Theme, and it totally depends upon how Font Awesome has been integrated into your website, here I will share the two most commonly used methods…

  • Manually Remove Font Awesome by putting a piece of code in your functions.php file.
  • Manually Remove Font Awesome by editing your style.css file.
  • Use a plugin to disable Font Awesome on WordPress

Warning – Removing Font Awesome may change the look and feel of your site and you may find some broken icons and ugly-looking sections. You can overcome this issue by tweaking the CSS of your site.

1. Manually Remove Font Awesome from WordPress 

If you want to manually remove Font Awesome icons from your WordPress site, the first step is to identify where Font Awesome is being used.on your website.

You can use a tool like GTmetrix or PageSpeed insights to analyze your website and see which files are being loaded. 

It is generally integrated into the CSS file or in the PHP file of your WordPress theme. 

Once you have identified where Font Awesome is being used, follow the instructions given below to manually remove Font Awesome from WordPress.

# Remove Font Awesome from WordPress Theme by editing functions.php

Many popular WordPress themes like Avada include Font Awesome in the theme itself and it loads locally from your server.

In order to Remove Font Awesome from a WordPress Theme or plugin, you need to use the function wp_dequeue_style in the functions.php file.

First, identify the $handle of the stylesheet that you want to remove.

$handle is the unique name of your stylesheet, in this case, it was fontawesome.

I suggest you look into the funcation.php file for the below line of code to get the handle of your stylesheet.

wp_enqueue_style( ‘fontawesome’);

Add the following code snippet at the end of functions.php to remove font awesome from WordPress. 

//* TN Dequeue Styles - Remove Font Awesome from WordPress theme
add_action( 'wp_print_styles', 'tn_dequeue_font_awesome_style' );
function tn_dequeue_font_awesome_style() {
      wp_dequeue_style( 'fontawesome' );
      wp_deregister_style( 'fontawesome' );
}

To safely turn off Font Awesome from WordPress theme, I would suggest you create a child theme and then add this code in the functions.php file of your child theme instead of your main theme file.

Do not forget to take a backup of your original functions.php file before making any changes. So that, if something goes wrong, you can revert using the backup.

# Disable Font Awesome from Elementor

Add the following code to remove Font Awesome from Elementor.

//* Elementor - Disable Font Awesome by TechNumero 

add_action( 'elementor/frontend/after_register_styles', 'deregister_elementor_icons', 20 );
function deregister_elementor_icons() {
    foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
        wp_deregister_style( 'elementor-icons-fa-' . $style );
    }
}

I would recommend using the Code Snippet plugin to safely add this code to your site. Otherwise, adding this code in the functions.php directly will also work.

# Remove Font Awesome from your website by editing style.css

If Font Awesome is being called from the style.css file in your theme as shown below.

You can Remove Font Awesome by deleting the line starting with @import url(………..).

@import url(/css/font-awesome.min.css);

or

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

Once you delete these Font Awesome imports from CSS, Font Awesome will stop loading on your website. This method is also applicable to Non-WordPress sites.

# Remove Font Awesome from any Website (Non-WordPress)

If you own a Non-WordPress site, there is a high chance that Font Awesome is being directly called from the index.html file.

Open the index.html file in a text editor, and find the code starts with

<link rel=”stylesheet” href=”…………….”> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >

or

<link rel="stylesheet" href="https://yourdomain.com/assets/css/font-awesome/4.4.0/css/font-awesome.min.css">

Remove these lines as mentioned in the above code snippet from the index.html file and save the changes. And you are done, Font Awesome will not load on your site.

Disable Font Awesome with WordPress Plugin 

There are several free and paid plugins available that can help you disable Font Awesome from your WordPress. Such as;

# Perfmatters

The easiest way to disable Font Awesome on WordPress is by using the Perfmatters plugin. It is one of the most popular plugins for WordPress optimization. Perfmatters allows you to selectively disable CSS and JavaScript files on specific pages and posts.

Here are the step-by-step instructions to disable Font Awesome using Perfmatters WordPress plugin:

  1. Install and activate the Perfmatters plugin.
  2. Go to the Perfmatters settings page.
  3. Click on the “Script Manager” tab.
  4. Scroll down to find the Font Awesome script.
  5. Toggle the switch next to the Font Awesome script to disable it.
  6. Click the “Save Changes” button.

By following these simple steps, you can easily disable Font Awesome on your WordPress site using Perfmatters. For just about $25, Perfmatters does a lot more to improve your website.

# Asset CleanUp

The free version of Asset CleanUp has the option to remove unwanted CSS and JS files from the front end. Using this function you can prevent font awesome files from loading on the frontend of your site.

First, install and activate the WP Asset CleanUp plugin. Go to the plugin settings pages and select the “Frontend” tab. Now, look for the “Font Awesome” option and uncheck the box to disable it. Save the changes and you are done.

Here are some tips for using the plugin effectively to remove Font Awesome
  • Only disable the CSS and JavaScript files that are not necessary for your website.
  • Test your website after making changes to ensure that everything is working properly.
  • Regularly review and optimize the files that are being loaded on your website.

How to Optimize Font Awesome Usage

If you decide to keep Font Awesome file on your website, there are some optimization techniques on how to use Font Awesome in WordPress efficiently to improve performance:

# Load Only Used Icons

By default, Font Awesome loads all the icon elements on all pages. This increases the number of HTTP requests and decreases the performance.

If you are using many different icons across multiple pages, this can still add up to a significant amount of overhead.

To further optimize Font Awesome usage, you can load only the essential icons that are being used across your entire website. This can be achieved by using the “Tree Shaking” feature of Font Awesome.

# Replace Font Awesome with Local Versions

Rather than loading Font Awesome from their CDN, you can download and host Font Awesome files locally on WordPress. This can reduce the number of HTTP requests and improve performance. However, it will not reduce the page size and require more disk space on your server.

# Use a CDN

If you decide to keep using Font Awesome, you can improve performance by using a Content Delivery Network (CDN) to host the files. A CDN stores the files on multiple servers around the world, which can reduce the distance that the files need to travel and improve page load times.

I would recommend you try Bunny CDN. It is quick and easy to set up. Get $5 credit into your account if you sign up using my link and apply the code TECHNUMERO.

Wrapping it Up

Removing Font Awesome from your WordPress theme will decrease your web page size and hence will result in a faster-loading website. I do not use Font Awesome or Dash icons on my websites, instead, I use SVGs and I would also recommend you replace font icons with SVGs.

Nowadays, most of the popular theme developers have started using SVGs in their themes instead of Fontawesome icons. You will find a great improvement in performance if you use themes like GeneratePress (I use on this blog), Astra, and Kadence.

Hope you will find this information useful. Do let me know which methods work well for you.

If you find it difficult to implement, comment below and we’ll help you out. You can contribute to making this world with faster loading websites by sharing this post.

Cheers!!!

You may also be interested to read about:

Remove Font Awesome from Divi

To remove Font Awesome from Divi, first check how it was added. If via the official plugin, go to your WordPress dashboard, deactivate, and delete the Font Awesome plugin. If you added the code manually in Divi Theme Options under the ‘Integration’ tab, simply remove the Font Awesome link from the ‘Add code to the <head> of your blog’ section and save. And do not forget to clear your cache after that.

Disable Font Awesome – Not working

First, uninstall any Font Awesome plugins through your WordPress dashboard. Identify how Font Awesome is incorporated (plugin, theme, manual code) and disable it accordingly. Investigate if another plugin is adding Font Awesome and deactivate it if necessary. Clear both your site’s cache and your browser cache.

Photo of author
Saurabh K
Saurabh K is a technology enthusiast and part-time blogger. He loves to explore the efficient use of technology and gadgets. He is an outlier and lensman. Add him in your social circle to know more.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

7 thoughts on “How to Remove Font Awesome from WordPress Theme – 2024”

  1. Avatar of James

    The code for the functions.php file worked perfectly. Thanks! Very Helpful!

    Reply
  2. Avatar of Birgitte Tüpker

    Hello!
    Any idea how to remove a bootstrap link to font awesome?
    This code is in the Final tiles Gallery Plugin for WordPress.
    I commented it out, but it will be overwritten by the next update, I think.
    wp_enqueue_script( ‘final-tiles-gallery’ );
    wp_enqueue_style( ‘thickbox’ );
    wp_register_style( ‘fontawesome_stylesheet’, ‘//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css’ );
    wp_enqueue_style( ‘fontawesome_stylesheet’ );
    }
    Thanks in advance – if someone is still onterested in this thread. 😉

    Reply
    • Avatar of Saurabh K

      Hi Birgitte,
      Just dequeue the fontawesome script permanently.
      Add the code given in the post, in functions.php file. Use $handlefontawesome_stylesheet.

      Reply
  3. Avatar of James

    Great article, thanks! Somehow, my problem remains, though… After adding the line to the .php file, nothing has improved and the .css files don’t contain an @import function, but rather the following:

    @font-face {
    font-family: ‘FontAwesome’;
    src: url(‘../fonts/fontawesome-webfont.eot?v=4.7.0’);
    src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0′) format(’embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.7.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.7.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.7.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    I’m using a theme called “Satisfy” and it has a fontawesome-webfont.svg (?) file which appears to be the biggest problem with over 2600 lines of code. I’m really not sure what to do here!

    Any help would be highly appreciated, if someone has an idea about this kind of problem. 🙂 Thanks in advance,

    Have a nice day,
    James

    Reply
    • Avatar of Saurabh K

      Well, this is the code you are looking for. But beware, it will completely remove the FontAwesome file, which may break your site’s functionality. Keep a backup before you delete anything.

      Reply
  4. Avatar of deewinc

    The CSS one worked. Thanks!

    I wonder how a file that’s only 70kb in size takes over 1 second to load. GTmetrix helped to identify the exact path of the file in my WordPress. What I did was follow the path and I found several Fontawesome files inside the CSS file.

    Mine appeared this way alongside several others
    => url(‘fonts/fontawesome-webfont.woff2?v=4.7.0’) format(‘woff2’)

    With others this is how it appears as shown below

    url(‘fonts/fontawesome-webfont.woff2?v=4.7.0’) format(‘woff2’),url(‘fonts/fontawesome-webfont.woff?v=4.7.0’) format(‘woff’),url(‘fonts/fontawesome-webfont.ttf?v=4.7.0’) format(‘truetype’),url(‘fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular’)

    So, I only deleted the one that was lagging the website as indicated on GTmetrix and oooh boy ooh boy, it cut the website load time by nearly 2 seconds.

    Reply
  5. Avatar of Sep

    works fine with perfmatters, tnx

    Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.