What is Font Awesome? Dash Icons?
Font Awesome and Dash Icons are both libraries of icons that are served to your browser. The libraries are huge and they have a wide variety of fonts available for you to use. However, there are way too many CSS files being loaded and because each file requires its own request, this really slow things down on your website. A lot of popular themes or plugins include Font Awesome and Dash Icon already even if you don’t necessarily need any icons for your site. If you ever see the little icons to Posts or Pages these icons are all coming from the Dash Icons library.
The amount of CSS files being loaded from these libraries is very bulky and will have an impact on page loading speed. In this guide, we’re going to be showing you how to remove these icon libraries all together.
How to Remove Font Awesome
The Font Awesome library could be coming from your theme or plugins that you don’t know about. There are several ways to remove Font Awesome but the easiest and cleanest way is to add this code snippet into your functions.php file. You can also dig into your code and edit the css file or use another plugin to remove Font Awesome, but we don’t want to break anything or add any more unnecessary plugins to our site.
Before you add any code, make sure you save a backup of your functions.php file in case you need to revert back to your old file. Whenever you edit your functions.php file, we highly recommend saving a copy of the file in case a typo breaks your website.
We recommend creating a child theme to add this to your theme (unless you have already done that), that way, your theme remains unchanged and if something doesn’t work right, you can simply disable the child theme.
Simply go to Appearance > Theme Editor > [select your child theme] > functions.php — then add the code snippet to that file by copy-pasting below
add_action( 'wp_print_styles', 'tn_dequeue_font_awesome_style' );
function tn_dequeue_font_awesome_style() {
wp_dequeue_style( 'fontawesome' );
wp_deregister_style( 'fontawesome' );
}After pasting the code into your functions.php file, you should no longer see Font Awesome being loaded onto your website.
How to Remove Dash Icons
Dash Icons is the WordPress admin icon font and the icon library is being loaded even if you don’t need any icons on your site. If you check the script analysis you will find that the Dash Icons file takes up about 29kb loading size. For some sites this is about 20% of total loading time for unused icons.
In order to disable Dash Icon from being loaded, all we need to do is deregister the stylesheet by adding this simple code snippet in your functions.php file. Keep in mind again, that we highly recommend that you save a copy of your functions.php file before editing.
Simply go to Appearance > Theme Editor > [select your child theme] > functions.php — then add the code to that file by copy-pasting below
function wpdocs_dequeue_dashicon() {
if (current_user_can( 'update_core' )) {
return;
}
wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );There are plugins and other ways to deregister CSS files, but adding this code will be the cleanest and easiest way to stop Dash Icon from being loaded to the front end of your website.
Conclusion
While there are several ways to remove Font Awesome and Dash Icons from being loaded, we found that adding these code snippets to your functions.php will ensure the safest and cleanest solution. The code snippets will improve your load time and reduce the total size of the stylesheets. When it comes to optimizing your site, we want to make sure we only load what is absolutely necessary and we hope this guide can help achieve that.
