Font Awesome 6

[TimWolla]

• [x] Migrate missing CSS from https://github.com/WoltLab/WCF/blob/master/wcfsetup/install/files/style/icon/icon.scss
• [ ] Update CSS Pseudo-Element rules: https://fontawesome.com/v6.0/docs/web/setup/upgrading#_6-update-css-pseudo-element-rules
• [x] Correctly handle the fact that the icon width may be up to 1.25× the height and the height is what's controlled by the font-size.
• [ ] Fix icon picker (IconFormField)
  • [ ] Brand Icons are located within the Brands Font.
  • [x] The path to the variables SCSS file changed.
• [x] Fix icon color for links.
• [x] Fix fa-flash icon, which is now animated (e.g. located in the notification settings for instant notification).
• [ ] Fix icons with width = height × 1.25 in square boxes (e.g. the USB icon in the WebAuthn plugin in MFA management); maybe see: https://fontawesome.com/v6.0/docs/web/style/fixed-width

Usage of the new <fa-icon> and {icon}: https://github.com/WoltLab/WCF/pull/4936#issuecomment-1209571432

[dtdesign]

Fix icons with width = height × 1.25 in square boxes […]

I'm not too happy with those wide icons, they are quite inconsistent and especially buttons are heavily impacted by this:

For comparison, this is what the icon looks like when highlighted:

Which means that the issue with wide icons isn't just limited to typical square boxes, but also impacts regular elements that contain text with adjacent icons. However, having strictly squared icons was almost a promise until now, defaulting to width: 1.25em for all icons does not feel right.

Looking at just the package list in the admin panel, I have identifier a total of 5 icons that exceed their boundary:

• fa-home
• fa-shopping-cart
• fa-users
• fa-comments
• fa-desktop

That is a horrible quota because it means this isn't just a rare case, but happens at a much greater scale. fa-fw does not seem to be an adequate tool here, because it affects many different icons and especially all sorts of user-defined icons will be impacted.

I can only imagine that we enforce width: 1.25em on all icons, because it reliably fixes the issue everywhere.

[dtdesign]

Bumping up the width to 1.25em is a nightmare and creates all sort of unexpected layout shifts. First and foremost, icons are now no longer squared (good luck using them in a rounded button) and take up more horizontal space. This causes otherwise equal width elements to be wider, one such impact is visible in the user menu:

The main concern I have is that this creates all sorts of unforeseen issues in both our products as well as third party vendors. And don't get me wrong here, the icons looks absolutely gorgeous and are a serious improvement over FA4/FA5, but its hard to justify breaking a lot of stuff.

[dtdesign]

Another issue is the use of Font Awesome icons in pseudo elements. These often rely on font-family: FontAwesome paired with content: $fa-var-…, which is entirely incompatible with Font Awesome 6. Depending on the icon you would need to provide either 'Font Awesome 6 Free' or 'Font Awesome 6 Brands' which is something we cannot reliably shim on our end. Sniffing for content is unreliable, because it is not guaranteed to be in the same scope.

To add injury to insult, the font-weight shenanigans in Font Awesome 6 creates quite a challenge, for example the fa-square icon is a completely filled out rectangle in font-weight: 900, but an empty box in font-weight: 400.

The different font families plus the font-weight also break the icon picker, because it relies on pure names only. The entire API is unable to deliver the extra information needed to set the right font family/weight.

Also, Font Awesome 6 is really bloated. Version 4 clocked in at ~75kB for the woff2, but version 6 is a staggering ~246kB (woff2, including 103kB for the brands font). This is an increase of around ~3.3x in file size while we do not benefit from the new icons right away. Since woff2 is already compressed, gzip does nothing to improve this situation. The large bundle sizes for the JavaScript are already giving me headaches, especially on mobile connections, but this is getting seriously out of hand.

[TimWolla]

Fix fa-flash icon, which is now animated (e.g. located in the notification settings for instant notification).

This was fixed upstream. The fa-flash animation was renamed fa-beat-fade in Beta 3.