How to Remove Dashicons from Genesis Theme

Updated on

Nowadays, almost all themes come with an icon pack like Font Awesome.  WordPress Genesis themes come preloaded with an icon pack called Dashicons. In this post I will discuss about how to Remove Dashicons from Genesis Theme. I will also showcase a data driven answer for effect of Dashicons on your website loading speed.

How to Remove Dashicons from Genesis Theme
How to Remove Dashicons from Genesis Theme

Icons packs mostly used to create eye-catching Social Sharing buttons, Call-to-Action buttons, bullet points or lists. Striking buttons provoke your visitor to click and help you in conversion, which is great.

Fastest WordPress Hosting Anywhere!

But there is a downside of using these icon packs, it increases your webpage size significantly. And large size webpages are not good for loading speed and rankings.

Why you should Remove Dashicons from Genesis Theme

According to an analysis, Dashicons file of 29.3 KB size took 772 ms time to load, which is 19.18% of total loading time, where the total page size was about 400 KB.

Genesis Sample Website Loading Time Pingdom Result
Genesis Sample Website Loading Time Pingdom Result
Dashicons CSS File Loading Time Pingdom Result
Dashicons CSS File Loading Time Pingdom Result

Note – I chose Genesis’s own demo website ‘Genesis Sample’ for this exercise to avoid biasness. You may find slightly different results of similar exercise due to other factors such as location, internet speed, font files hosted on the same server or loading from a CDN etc.

How to Remove Dashicons from Genesis Theme

In order to Remove Dashicons from Genesis Theme, you need to add the given below code in functions.php file of your Genesis child theme. Don’t forget to back up your functions.php file before making any changes.

//* TN Dequeue Styles - Remove Dashicons from Genesis Theme
add_action( 'wp_print_styles', 'tn_dequeue_dashicons_style' );
function tn_dequeue_dashicons_style() { 
      wp_dequeue_style( 'dashicons' );
}

When we say content is the King, we should not forget that web page loading speed is the Queen. We have to maintain the web page size minimum and it should load with in a second or two.

It is totally up to your preference whether you wanted to Remove Dashicons from Genesis Theme or want to keep those fancy icons. If you cannot live without icons then I would recommend you to call your icons through a CDN.

Still in dilemma, I have written a detailed guide how loading Font Awesome impact your webpage loading speed and How you can remove it, read it here.

Did you found this information useful, are you planning to Remove Dashicons from Genesis Theme or it don’t bother you? Let me know in the comments section below.

Catch you in the next one.

Peace!!

You might be interested in website optimization for SEO:

Most SEO friendly Permalink Structure for WordPress
How to Set Up Yoast WordPress SEO Plugin with Optimized Settings
How to Remove Render Blocking JavaScript
Remove Google Fonts form WordPress Theme

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.

12 thoughts on “How to Remove Dashicons from Genesis Theme”

  1. Avatar of Lora Empson

    Well, I am not using Genesis theme for my WordPress blog. But this tip will really help for my client’s blogs. As most of them are using Genesis platform. Thank you for a good material.

    Reply
  2. Avatar of Thomas Chang

    Hello Saurabh,

    I’ve found that this can be done by removing wp_enqueue_style(‘dashcions’) in the functions.php file.

    Reply
    • Hey Thomas.
      Yes. removing wp_enqueue_style(‘dashcions’) from fucntions.php will do the trick, but it will come back when you will update your theme.
      It is good to use a custom functions.php file for such type customization.
      Thanks for stopping by.

      Reply
  3. Avatar of igre

    I am using Genesis theme, it worked.

    Reply
  4. Avatar of Jen

    Any idea where would I add this code in Genesis Simple Hooks? I try not to edit the actual theme files.

    Reply
    • Avatar of Saurabh K

      You may use the code in wp-head. However, do not forget the PHP execution via hooks.

      Reply
  5. Avatar of Vishal

    exactly what I was looking for. I am also using Genesis Sample child theme and tried your method. But the responsive menu’s icon don’t show after doing this. Any idea how to keep that 3 line icon we see on mobile after removing dashicon with your method? thanks

    Reply
    • Avatar of Saurabh K

      Hey Vishal,

      To display the menu icon for open and close, you should add the following CSS code.

      .menu-toggle:before {
      content: "☰";
      }

      .menu-toggle.activated:before {
      content: "✕";
      }

      Hope it helps.

      Reply
      • Avatar of Son Nguyen

        Hello Saurabh,

        How about the dashicons arrow down (f347) and arrow up (f343)?

        Could you please let me know how can I find the content so I could copy and paste to my code?

        Reply
  6. Avatar of Raj B.

    Hi Saurabh,

    I stumbled upon this excellent post, thank you. Similar to the CSS code for showing the hamburger menu symbol, is there a way to show the search icon (the small lens) which too disappears from the search bar when the dashicons are disabled.

    Many thanks

    Reply

Leave a Reply to Lora Empson Cancel reply

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