Font Awesome improvements
On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library. That's up to 8,000 icons split across their different variations, but on any given page we actually use... a lot less than that. The file size of each of these fonts is up to 200KB with an additional 40KB worth of CSS.
We have always wanted to ship a much smaller subset of icons but when admins, style designers and add-on developers have the full suite of icons available to them, this can be a challenge. In particular, working with fonts directly in order to create a subset can prove to be somewhat tricky.
Back in 2019, we prototyped something very similar to the excellent
Font Awesome Manager add-on released by
@Kirby, but we ultimately decided that this wasn't necessarily the approach we wanted to take.
In XenForo 2.3 we have developed a brand new way of subsetting Font Awesome icons so that only the icons which are actually used across your XenForo installation are ever served to your users and, even better, it's entirely automatic!
Icon usage analyzer
XF 2.3 now includes an icon usage analyzer which can analyze precisely which icons are being used across various content types, including within Less templates, and HTML templates, template modifications, phrases and even within JavaScript.
The way that you use icons is not significantly changing from what it was in XF 2.2. For example, if you're familiar with using, e.g.
<xf:fa icon="fa-comments" /> in templates or
.m-faContent(@fa-var-comments) in Less templates then you're all set.
However, some approaches will no longer work. For example, using
<i class="fas fa-comments"></i> will no longer work. These usages will not be analyzed and will not result in an icon being displayed. Because of this, there is a brand new syntax for use in phrases.
See the table below for examples:
| Type | Code |
|---|
| Templates / template modifications |
HTML:
<xf:fa icon="fas fa-comments" />
|
| Less templates |
Less:
.m-faIcon(@fa-var-solid-comments);
|
| JavaScript |
JavaScript:
XF.Icon.getIcon('solid', 'fa-comments')
|
| Phrases |
|
We are aiming to go into a little more detail surrounding the icon usage analyzer in an upcoming developer-focused 'Have you seen...?' but for now it is important to note that the usage analyzer can of course be extended in order to support analyzing in custom content types and other scenarios, including special casing specific icons.
Rendering icons
So, what do we do with the analyzed icons? Well, rather than working with a somewhat clunky font file format, we use the information to produce an SVG sprite sheet. Actually, not just one, but one for each of the Font Awesome 5 Pro styles -
light,
solid,
regular, and
duotone and each of those contains
only the icons we analyze in those styles.
For example, here's the full extent of the spritesheet we generate for the
solid style, by default:
XML:
<?xml version="1.0" encoding="UTF-8"?>
<!--
Font Awesome Pro by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Commercial License)
-->
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="check-circle" viewBox="0 0 512 512">
<path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
</symbol>
<symbol id="exclamation-circle" viewBox="0 0 512 512">
<path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/>
</symbol>
</svg>
This is only loaded on the pages that actually use those icons but, what is even better, is that whereas previously we'd load a full 137
KB font file, this spritesheet weighs in at a mere 726
bytes.
Overall, the total file size we were loading for icons by default on the forum home page was around
400 KB now it will be less than
40 KB.
