Font Awesome 5 Update

We are happy to announce we are adding Font Awesome 5 to our design and development process. This means the latest and greatest icon pack will be part of all upcoming projects.

Font Awesome 5 (FA5), released a few months ago, comes with multiple icon sets with great icon selections. It also added a whole new way of adding icons to the page as SVG with JavaScript.

Previously, we held off on adding FA5 to our base theme for two reasons:

  1. Filesize concerns – SVG with JS fonts are huge, coming in around 1.5 MB for all four sets. Now, because the JS is deferred, it is not render blocking, and therefore the filesize concerns are not as big of an issue. However, 1.5 MB is still so much to download that icons would be popping in late after the page loads.
  2. Working with SVGs is different – The switch to SVGs is a big change. Also, the official documentation states that adding FA icons as CSS pseudoelements is not recommended with the SVG in JS method.

Well, some good news. With some more research, we’ve found that:

  1. FA5 provides the same CSS-driven approach we already use;
  2. This enables use of CSS pseudoelements the same way we are used to, but with the updated icons set;
  3. If we load the fonts in the footer, it render blocks even less than the way we used to load FA4 (bringing the fonts in with the main stylesheet).

So we have decided as a team to upgrade to FA5 using the CSS method so that we can continue to offer our clients awesome high-quality icons that work well on any screen size.

Newer icons, same code style, better page load? Yep.

Leave a Reply

Your email address will not be published. Required fields are marked *