Dave GandyDon’t insult me. I can fail circles around you losers.
Remember the catchphrase, “move fast and break things”? Facebook originally popularized the motto, and it caught on with large swaths of development teams, both large and small. The big idea? If you’re not breaking stuff, you’re not delivering value to customers fast enough. Well, we’ve had to cleanse our palate of that idea for when folks upgrade Font Awesome — especially between major versions.
The problem is that when you don’t have the resources to keep up with needed fixes and you continue delivering half-baked software over and over, you’ll inevitably lose users.
Well, it turns out the “break things” was an experiment that essentially fell flat. Unfortunately, Font Awesome bought into the idea too. That is until we joined Dave Winer’s No Breakage Club.
This blog is an overview of the mistakes we made when we released version 5. We’ll cover what we learned and how upgrading to Font Awesome 6 should be a much more seamless experience.
We Broke Backward Compatibility with Font Awesome 5
Developers tend to be crafty folks, and we love tinkering to make things better. We knew that some of our icon naming conventions could be cleaner and improve future growth, so we got to work.
So, what changed from version 4 to 5?
3 Different Icon Styles
We introduced every icon’s solid, regular, and light style in Font Awesome. We also separated our brand icons into their own style and category for easier use. We needed a way to reference a particular style when an icon is called in markup. It’s still the case that for each icon you want to use, you need to 1) specify the icon’s name and 2) use the proper prefix. Version 4 just had one prefix — fa. Version 5 has four prefixes to let us set the style of any icon easily:
But we created a problem in the process. We didn’t build in backward compatibility, which made upgrading a headache for many users. We jumped into fixing the issue as soon as it reared its head. But we broke trust with many of our users in the process.
Fortunately, Dave Winer set me straight and proclaimed the gospel of the No Breakage Club. I have since become a devotee, and we learned from the version 4 experience.
Dave Winer is an American software developer, entrepreneur, and writer in New York City. Winer is noted for his contributions to outliners, scripting, content management, and web services, as well as blogging and podcasting. Basically, he's a big deal in the world of open-source tech.
Why the “Move Fast and Break Things” Motto Didn’t Work
We never thought Font Awesome would become the de facto icon standard on the internet with Font Awesome version 4. And honestly, that’s not a humblebrag. We were still operating under the move fast and break things mindset, which is maybe a bit more forgivable when you’re a small company.
The problem is, we didn’t think through how disruptive the v5 changes would be. What seemed most important at the time was to ship faster — and we definitely wanted to deliver on the promises we made to all of the generous Kickstarter backers.
Check out our original kickstarter video
When you create breaking changes for a few million users (version 3), it’s one thing. But between version 3 and 4, we’d grown exponentially — and effecting the now 20 million users was a big deal. Clearly we hadn’t grown into our big kid britches yet.
What We Learned: Build-in Backward Compatibility for V6
In hindsight, we could have proceeded with a couple of different options when we rolled out v5. For starters, we could have avoided name changes altogether. Or we could have at least ensured we had help in place at the time of release, so users experienced an easier transition from version 4 to 5.
Well, we’re glad to report that we learned from that experience, and we’ve built robust backward compatibility into version 6. In fact, the amount of effort we put into version 6’s upgrade-ability rivals the amount of time we spent building version 5 altogether.
That’s not a 100% guarantee that we fixed every single bug, but we’ve turned over every rock we know to look under. If we missed something, let us know!
On the Web or Desktop — We’ve Upgraded Font Awesome 6 for the Way You Work
Now when you upgrade to version 6, everything should work — even if you’re upgrading from version 4. We won’t force you if you don’t want to use the new names for icons. And if you’re going to use the old way of using styles, you can still do that.
Packages and plugins
Working with Version 5 JavaScript components? We’ve taken care of backward compatibility for you. Once you install the v6 version packages, you’ll be off and running. (The upgrading process for WordPress and Python is slightly more involved.)
On the desktop
If you use ligature-based .otf Desktop fonts, upgrading follows the familiar step of downloading and installing newer font files locally. Once you’ve completed the install, you’ll need to manually update any existing “Font Awesome 5” text layers to use the “Font Awesome 6” typeface.
Upgrade Quick and Easy with Kits
The most hassle-free way to upgrade is to use a Kit. Our Kits come with version 4 and version 5 compatibility included, which automatically manages the most challenging parts of upgrading for you. Create a Kit, add its embed code to your project, and we’ll take care of the following:
Auto-mapping Old Icon Names
Kits’ version 5 compatibility (as well as version 4) handles any references to older version icon names or aliases that we changed.
Supporting CSS pseudo-elements
Your project may still have CSS that references the old font-family name, a common scenario when your project depends on other themes or plugins that load their own, older versions of Font Awesome. We’ll define the old font-family and unicode codepoints to use the newer version of Font Awesome you’ve configured. This will guarantee that any CSS pseudo-element rules you’ve set use the proper icon.
Letting the old prefix reference the Solid style
Where the “fa” prefix is used will automatically reference the Solid style. And as a neat bonus, you can even change this default style to another style like Light, and your entire site will change.
Visual matches for upgrades from v4
In version 5, we separated solid versus outlined icons into Solid and Regular. In version 4, the outlined version of icons had a “-o” postfix, like “fa-envelope-o .” In version 6, we’ve spent a lot of time ensuring that old outlined icons visually map to their new counterparts. We even go so far as to include some Regular icons in Font Awesome Free so that we can get that perfect match when you upgrade.
Get Kitted Up!
Font Awesome Kits are fast, flexible, and full of icons. They’re like the personal CDN you’ve been waiting for. Our Kits service gets icons into your web projects with just one line of code. Just create, add the <script> tag to your project, and you’re set to get the icons flowing.
