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.
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.
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.
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
![How to Defer Parsing of JavaScript Properly + WordPress Fix [Updated Guide]](https://technumero.com/wp-content/uploads/2016/07/how-to-defer-parsing-of-javascript-370x170.png "how to defer parsing of javascript")
![10+ Fastest Web Hosting for WordPress [2022] – Reviewed and Compared](https://technumero.com/wp-content/uploads/2021/03/Fastest-Web-Hosting-for-WordPress-370x170.png "Fastest Web Hosting for WordPress")
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.
Glad, you find it useful.
Hello Saurabh,
I’ve found that this can be done by removing wp_enqueue_style(‘dashcions’) in the functions.php file.
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.
I am using Genesis theme, it worked.
Any idea where would I add this code in Genesis Simple Hooks? I try not to edit the actual theme files.
You may use the code in wp-head. However, do not forget the PHP execution via hooks.
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
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.
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?
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