AwesomeDings

This package was created as an April Fools’ Day joke.

I took the entire FontAwesome package that my workplace was using, replaced it with my homemade AwesomeDings package, and proceeded to change all our icons. Elements on this page may not render correctly if you don’t have the Webdings or Wingdings fonts installed.

Why?

1. Font Awesome relies on serving external font files.

   This a major security concern that web browsers take very seriously. In fact, IE has been known to consistently trouble developers whenever external fonts are mentioned, just to make sure they really know what they are doing. Additionally, the external files lengthens loading time and just offers another point of failure in your project. Don’t make life harder on yourself.

2. Wingdings is natively supported on Windows and in IE.

   No one has Font Awesome installed natively on their computer. However, Windows is the most widely used operating system, and thus practically everyone has Wingdings/Webdings already installed! (Imagine developing something that magically works on IE). In fact, developers can browse the Wingdings/Webdings icons with the handy dandy Character Map application offline, without needing to constantly Google where the Font Awesome cheatsheet is.

3. Wingdings has been around for over 25 years.

   This is proof of its stability and popularity, and the icons are all ones users and developers are very familiar with. Wingdings has been around since 1990, and Webdings since 1997. Font Awesome on the other hand, was only conceived in 2012 and its still constantly changing. It’s terrible to rely on packages which are shaky and become outdated in weeks (I mean Font Awesome has over 4000 issues open).

4. Wingdings lives in the ASCII block of Unicode.

   Font Awesome likes to give their icons “elite” Unicode points that no one else uses. This requires developers to use hard-to-read values like \f152 or their human-readable but tiring-to-type and just-as-cryptic counterparts like $fa-var-caret-square-o-right. With Wingdings you can achieve the same effect by typing a single symbol }. (With minimal practice, you’ll learn that } is a little filled triangle pointing rightward in the Wingdings 3 font family). Wingdings will also fallback to these informative symbols, instead of the ☐☐☐☐☐☐☐☐☐☐ with Font Awesome. By not having to include these extra variable names, the AwesomeDings package ends up being almost 90% smaller than Font Awesome (and that’s not considering the font files!).

Playground

This does not go over Fixed Width Icons, List Icons, Bordered & Pulled Icons, and Stacked Icons which are all supported. Remember to add 0xF000 for 0xAD / 173 (see issue).

<i class="wd-webdings wd-5x">&#x6d;</i>

Cheatsheet