Skip to content

feat: upgrade Font Awesome to 7.3.1 - #1073

Open
tanasegabriel wants to merge 1 commit into
bastienwirtz:mainfrom
tanasegabriel:feat/fontawesome-7
Open

feat: upgrade Font Awesome to 7.3.1#1073
tanasegabriel wants to merge 1 commit into
bastienwirtz:mainfrom
tanasegabriel:feat/fontawesome-7

Conversation

@tanasegabriel

Copy link
Copy Markdown
Collaborator

Description

Font Awesome 6.7.2 is two years old and version 7 adds a large batch of new free icons, which is what #1069 asks for. The free set grows from 2492 to 2606 usable names.

Version 7 is a major release (changelog here), so the work here is mostly about making the jump invisible to existing dashboards. Icons set through the configuration (icon: "fas fa-server") render exactly as before, including the older fa, fas, far and fab syntax, and custom stylesheets keep working.

Two things version 7 changes had to be handled:

Removed CSS surface. Version 7 drops the "Font Awesome 6 Free" and "Font Awesome 6 Brands" font families, the --fa-style-family-brands custom property, and the .sr-only / .fa-sr-only classes. Custom icon sets and dashboard HTML in the footer, message box and service subtitles can all depend on these, so src/assets/components/fontawesome-compat.scss maps them onto their version 7 equivalents. The family aliases point at the same webfont files version 7 already ships, so they add no download.

Icon width. Version 7 gives every icon the same width, which is what fa-fw used to do on its own. Applied as-is that widens every stock icon that does not carry fa-fw, including the header icon and the Speedtest Tracker, rTorrent, Gatus, OctoPrint, Proxmox, Miniflux and Glances cards, so a dashboard visibly shifts after upgrading. Homer keeps the previous behaviour by default and exposes the new one as an option:

defaults:
  iconWidth: auto # Either 'auto', or 'fixed'

auto is the default and reproduces the version 6 layout. fixed opts into the version 7 look, which lines icons up in a column when services use icons of different widths.

Verification

Rather than trusting the changelog, the version 6.7.2 and 7.3.1 metadata and stylesheets were diffed directly:

  • Comparing every free licensed name in both releases, canonical names and aliases across all families, vector-square is the only name that disappears. Font Awesome renamed it to draw-square and made that Pro only. It is called out in docs/troubleshooting.md with object-group and crop-simple as the closest free replacements.
  • No icon lost a free style, and no codepoint changed, so stylesheets using literal escapes such as content: "\f002" are unaffected.
  • Diffing the two all.css files at the selector and custom property level, the removals listed above are the complete set. The compat file covers exactly those and nothing more.

Other notes

  • The version 6 font family aliases live in src/assets/webfonts/webfonts.scss alongside the existing Noto face, rather than in the compat file, so all @font-face declarations stay in one place.
  • A production build confirms the aliased families resolve to the same hashed assets as version 7's own faces, so the compat layer costs no extra font request.
  • .schema/config-schema.json gains the iconWidth key.
  • The search field's magnifying glass in base.scss now names the version 7 family directly instead of relying on the alias.
  • No new dependencies. The only lockfile change is the Font Awesome entry.

Not breaking: with iconWidth defaulting to auto, an existing dashboard renders identically after the upgrade. The only visible difference is fa-vector-square, which upstream removed.

Closes #1069

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Refactoring

Checklist:

  • I've read & comply with the contributing guidelines
  • I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
  • I have made corresponding changes to the documentation (README.md).
  • I've checked my modifications for any breaking changes, especially in the config.yml file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat] Update to Font Awesome v7

1 participant