Font Awesome

Fixing a unicode bug in 5.14.0

by Rob Madole

Don’t worry! As long as you hit that wire with the connecting hook at precisely 88 miles per hour the instant the lightning strikes the tower…everything will be fine.

5.14.0 introduces breaking changes for anyone who is using web fonts with CSS and CSS Pseudo-elements. We’ve posted more details on our upgrading doc.

Background on the bug

Version 1 of Font Awesome came out in 2012. Distributed as a web font, it utilized the Private Use Area (PUA) in the Unicode specification to represent all the icons.

The advantage of using the PUA is that normal, non-iconic typefaces avoid these ranges when they are laying down their glyphs. So it was a good choice for placing something slightly unusual like icons. Font Awesome could be sure that it wasn’t stepping on the toes of another typeface.

Unicode values are represented as hexadecimal values. Font Awesome’s first icon in the PUA range was “f000”. Each icon that was added incremented the value by one. So the second icon was “f001”. Let’s quickly look at what the specification says about our ranges:

  • U+E000..U+F8FF
  • U+F0000..U+FFFFD
  • U+100000..U+10FFFD

By the end of 2016 Font Awesome was at version 4 and contained 675 icons.

As Font Awesome 5 added thousands of icons over the years we began to consume more of the PUA range. At version 5.11 we had almost hit the ending unicode value “f8ff”. I bet you can see where this is going as we prepare to release 5.12.0…

Version 5.12 and 5.13 included icons that just squeaked past the limit of the Private Use Area range. We overshot it by about 120 icons.

This caused a couple of problems. Some of our desktop users were unable to use Font Awesome. We also started showing some of the Chinese, Japanese, Korean (CJK) ideographs temporarily as the icon font was loading in the browser. Nasty business.

Should we have watched out for this? Yes. After fixing this bug are we watching out for this? You bet your sweet biscuits we are.

For version 5.14 this fix included relocating the icons to different unicode values. Our best option was to wrap this back around to the beginning of the range starting with “e000”.

And here is what we have today with the release of 5.14. All the icons are properly within the Private Use Area. We have room to grow and we are carefully watching to make sure we don’t repeat this again.

But…it’s a breaking change. So you may need to take some steps to upgrade.

Who is affected?

If you can answer yes to all of these questions, you have a few minutes of work to do:

  1. I am using web fonts with CSS
  2. I am using CSS pseudo-elements

To upgrade to version 5.14 you will need to:

  1. Lookup the new unicode value if you are using any icon listed here
  2. Replace the old unicode value with the new unicode value in your CSS “content” property

As always, if you have trouble or questions send us an email at