Earlier this year while working on a client project revision, I decided to spruce up the old and dated icon set. This set had been cobbled together from various sources over time (the way you did these things back in the day), and overall lacked a consistent use and/or feel. Some actions had no associated icon, so educated guesses were made to find a matching icon from the existing set...and so forth.
Ultimately, it was time. But where to start?!
Becoming Font Awesome
I started looking around for options, and based on the very cursory use of Font Awesome supported features on another project decided to give it a shot with the free version. Using Font Awesome is pretty simple, especially by following their intuitive Basic Use information.
I quickly decided that it would be totally worth supporting the Pro version for a number of various reasons...but the free version is still nothing to snob about due to the huge breadth of icons available. Pro supports all sorts of variations on the free set (plus more), which ultimately helped make something Greater than it would've been.
Simple To Use
At the end of the day it's a simple set of includes (for
.js), and the specific references for an icon (
<i class="fas fa-camera"></i> for a camera icon). Done.
It has been occasionally helpful to use the Font Awesome Cheatsheet to reference stuff, but the default search works just as well in most cases.
More Complex Use
I've used much Font Awesome here on this site as well, primarily with the standard/free version icons. This has required some use of the CSS Pseudo-Element support, which is admittedly somewhat gnarlier to set up and use (properly) than the basics...but it's still been a lifesaver.
The change to using Font Awesome has been an amazing and worthwhile investment, for many reasons. Well worth learning how to use it, and has saved a load of time overall. Be [Font] Awesome!
Headline image via whosawesome.com