Arthur Musgrove Home

Tiny FontAwesome

Tiny FontAwesome is a drop-in front end for the fantastic FontAwesome icon library. It dramatically reduces the size and decreases the load time because it only loads the icons you need - not the entire library - and will cache all icons used in the client device in localStorage. More below on how these performance improvements are accomplished, but on this site load times went from over 300ms to around 30ms, and the amount loaded went from hundreds of kilobytes to less than 10kb.

To use Tiny FontAwesome, simply replace your current FontAwesome script include directive with the following code.

<script defer src="https://tinyfontawesome.ajmusgrove.com/lib/tfa.min.js"></script>

With the library loaded, you use FontAwesome like you usually do with the SVG with JS mode. Instructions can be found here. This supports all the free fas, fab, and far icons. It does not at this time support the paid, premium icons.

Every icon and feature of FontAwesome is supported except data-fa-mask and Layering, Text and Counters. These are rarely used features, but if you require either please email me to discuss adding either feature.

Note: If you are using a Content-Security-Policy, you need to make the following additions.

  • style-src - Add tinyfontawesome.ajmusgrove.com
  • script-src - Add tinyfontawesome.ajmusgrove.com
  • connect-src - Add tinyfontawesome.ajmusgrove.com and www.google-analytics.com

How It Works

FontAwesome normally loads the entire, very large library every time. There is no caching and every icon is loaded every time, which means it is loading thousands of icons even though you probably only use a few.

Tiny FontAwesome uses a small JavaScript without any icons included that scans your page looking for the same tags that that the regular FontAwesome uses (fas, fab, and far classes in <i> tags). When it finds these, it connects to the intermediate server at tinyfontawesome.ajmusgrove.com and only downloads just those icons you are using. In addition, it only does this once: when icons are downloaded they are stored in localStorage in the user's browser, and in the future they are loaded out of localStorage. This also uses the CloudFront CDN, which has edge caching in 100+ major cities around the world, so even the intermedia server rarely comes into play - it is really just populating the caches on first load instance.

All of the usual style classes are supported such as the sizes (ie fa-sm, fa-lg, etc) and effects such as fa-spin. data-fa-transform and style inlining is also completely supported the same way it is in regular FontAwesome.

Enjoy!

I hope you find this useful!

Subscribe to the Tiny FontAwesome mailing list