225 Followers
·
Follow

The Ents have decided…We have all agreed… that you two are not Orcs.

Image for post
Image for post
Photo by Camille / Kmile on Unsplash

This all started with an issue on our private Font-Awesome-Pro GitHub repository. Our support for tree shaking was shaky at best, requiring an additional tool-specific configuration that was easy to miss.

We started down the path to fix the root issue related to tree shaking and ended up mixing in a little TypeScript, reconfiguring how we do packages, and changing how our underlying API is organized. This quickly became a breaking change. And Font Awesome 5.1 became necessary to signal the upgrade from 5.0.

Who is this article for?

  • Anyone who is using or wants to use NPM (package.json) to install Font…

Image for post
Image for post
Our journey to lose some weight on our new JavaScript SVG Framework

I’m worried, Ray, it’s getting crowded in there and all my recent data points to something big on the horizon.

Our team has been hard at work on Font Awesome 5. At the time of this writing we are 96% complete converting the older version 4 icons. We’ve added completely new styles: Regular and Light. There are tons of new brand icons and new features such as the SVG Framework and Power Transforms.

We’ve received a lot of positive feedback but something caught my attention while I was reviewing the issues thread on our private Font-Awesome-Pro GitHub repository.

Image for post
Image for post
fontawesome.min.js is 66kb

To make working with SVG a piece of <i class=”fa fa-cake”></i> our new framework uses JavaScript. We’ve been focused on adding features and haven’t spent time optimizing performance or file size. As of beta 2 the main file had grown to an embarrassingly large size. …


We recently had a Font Awesome CDN user ask us if there was a way to fallback to CSS-only when using an embed code.

While asynchronous loading and auto-accessibility will not work if JavaScript is disabled that’s no reason to keep the icons from showing up. We can do better.

If you haven’t heard of or tried our free CDN product you can register with us and get a brand new embed code of your own to play with by going to https://cdn.fontawesome.com.

Here is a quick example of how you can keep icons working even if JavaScript is disabled.

Check it out…

About

Rob Madole

Developer in the smack-dab middle of the United States. I work at Font Awesome.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store