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