Blog Article

Font Awesome 5 in Rock v7

Everything is AWESOME! Well.. almost! FontAwesome 5 represents a huge step forward in icon-based fonts for the web. This isn’t a simple upgrade, but rather a new framework for icon fonts. Version 5 has a lot of changes. These changes were made for good reasons, but they do impact how Rock uses FontAwesome quite a bit (and we started by thinking, "this will only take 15 minutes"). Letʼs look at some of the changes and then our implementation goals in Rock. We’ll finish up with some of the remaining unknowns.

Some of the changes in FontAwesome include:

Lots of new and cool things. Let’s next look at some of the challenges:

  • Over 100 icons were renamed. That’s a challenge as these icons are already in use in core and plugins.
  • Of the free version’s two weights, only one (solid) has all icons implemented (regular is hamstrung and can’t be used by itself).
  • The solid weight does not make creating checkboxes and stars very easy as everything is solid. So when using solid we had to also load regular and translate the -o to regular to make everything look right.
  • The SVG pattern is really cool, but the file size is HUGE; like twice the size of the normal font.
  • The way the whole system works is very different. In a good way, but different.

Based on this, our implementation goals and direction include:

  • Based on the large file size, we’ll continue to use the standard web fonts for now (no SVG). That could change in the future if the file size is addressed. Also, there’s some really cool innovation coming to web fonts that might make them more attractive in the future.
  • Out of the box, Rock will ship with the free version. Because of this we will default to using the solid weight since it’s the only complete icon weight in the free version.
  • We will write a block to easily allow you to implement the Pro version. This will allow you to enter your key and upload the downloadable zip file with the new version.
  • Once Pro is enabled we’ll allow you to dynamically change the weight of the icons on a per theme basis. Super cool!
  • We’ve created custom mappings for all the old font names so they’ll continue to work like they always have.
  • While FontAwesome 5 has added new CSS prefixes for each weight (before there was only “fa,” now there are “fas,” “far,” “fal” and “fab”), we highly encourage you to keep using just “fa” as this will allow us to dynamically change the weight of the icons based on the theme. If you use one of the new weights, you’re basically saying, “I don’t care what the administrator thinks, I’m making this puppy solid!”

While FontAwesome 5 has been released, it’s far from finished. Here’s what’s coming, along with some possible future challenges.

  • There are 47 additional icon packs coming. Each pack will include 10 additional icons for the Free version and 30 for Pro.
  • We don’t have a firm understanding of how these will be implemented. We have talked to the FontAwesome team and have a rough idea, but we’re from Missouri, the Show-Me-State. Well actually we’re from Arizona, but you know what we mean.