Replacement for FontAwesome

by Andy Prevost

Friday May 31 2024

I have used FontAwesome for years now, many many years. When FontAwesome upgraded v4.7.0 to v5, I stayed with 4.7.0 for two reasons. The first is that the license for v5.0 was restrictive and introduced a pay model. The second is that the icons I needed were in 4.7.0 for free. Any additional icons I might need were in the paid version of 5.0.

I was always concerned about the load times for Font Awesome. I did reduce the load time somewhat by restricting the font files to include only woff2 versions ... that's all that is needed on modern browsers. That still is 106Kb minified with no further reduction with gzip.

I posted an article yesterday where I said I would be looking for an alternative ... well I found it and the alternative is FontAwesome, but delivered through Fontello. Fontello provides a service where you can select the icons you want and they build a custom font and custom css file. When I selected the icons I use, I was able to get that 106Kb original package down to 14.4Kb (both minified). That's a bandwidth savings of over 86%. (PS. I'm not sure the logo at the right is the Fontello regular logo ... I couldn't find a logo for them on their site, I did find this on Pinterest - apologies if incorrect).

At the Fontello site, I selected the icons I wanted in my custom package. I then downloaded from Fontello and it included a "config.json" file. If I ever want to modify my custom package, all I do is return to the Fontello site, upload my config.json file and all the icons I selected are there. I can then add or delete and download the modified custom package. All this without having to create an account.

There is a bit of a caveat ... the new font are all prefixed with fontello.* (instead of fontawesome*.*). From a fresh download of the fontello.css file, the two class names "fa" and "fa-" are now "demo-icon" and "icon-". I didn't want to redo all of my client sites (or my own for that matter), so I modified the code so that I can continue to use font-family: FontAwesome; and "fa " and "fa-" ... no modifications to html files at all, and a whopping huge savings on bandwidth. How I modified the code: a PHP script running on my server, read the font, modify, read the css, modify, write back to server and bring it back to my desktop. Process takes a bit less than 1 second after uploads.

If you visit the Fontello site, note all the icons from various sources that are available to make custom packages. I plan on creating several packages to use as needed in website. At least one more: Social Media icons.

Enjoy folks, and thanks to Fontello ... if you do use Fontello, please consider a donation to keep the project alive. (I am not affiliated with Fontello).

UPDATE: a small bonus ... with my modifications, there is also no need to modify other CSS code. Quite a few hours saved!

UPDATE 2: I edited my fontello custom package. Minified CSS is now 3.4Kb total (with font) is 18.5Kb (about 82.5% bandwidth reduction).

 

◀ Previous Next ▶

Post a Comment