How to Asynchronously Load Font-Awesome CSS File

Asynchronously load .css files like Font-Awesome.css
by Updated August 26, 2014


Font Awesome is pretty darn "awesome" for easily adding scalable icons to your website. It also works great with Bootstrap!  However, the down side is that with all it's cool icons, more than likely you won't be using most of them on your pages, so loading the Font-Awesome.css file may add extra load time baggage to your websites page load time.  So if you want to speed up your page load times and optimize CSS Delivery of Font Awesome (so it passes Google Page Speed tests), you may want to asynhcronously load the Font Awesome css file (or any Non-critical .css files).

In order to asynchronously load Font-Awesome.min.css, just add the following script within the HEAD tag of your web page.  See more on GitHub here (discussion here).

<script>
        // Asynchronously load non-critical css 
        function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
        // load css file async
        loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
    </script>

The script above will asynchronously load CSS files, not just the "font-awesome.min.css".  So if you want to asychronously load a another css file just replace "//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css", or add a second loadCSS.  For instance:

        // load css file async        loadCSS("/css/my-test.css");
 


0
3

3 Comments

anonymous by keepact on 6/6/2016

Thanks for the code! I've been looking for these days and there was only achieved the option of putting it in the html footer with a different code. Thank you so!

anonymous by katapofatico on 8/24/2017

Thanks for the code :) What are the meanings of t and n function parameters?

Thank you very much, its help full

Add your comment

by Anonymous - Already have an account? Login now!
Your Name:  

Comment:  
Enter the text you see in the image below
What do you see?
Can't read the image? View a new one.
Your comment will appear after being approved.

Related Posts


I would like to learn how to get the skills and education to be able to build interactive websites. Can you give me some help and explain how to get started?  more »

Adding a CSS border to an ASP.NET Image control was a mystery to me for the longest time. While you could easily use an html image and add the runat="server" to it and then add CSS, I really wanted to use an asp:Image control along with a CSS border....  more »