How to Asynchronously Load Font-Awesome CSS File

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");