Skip to content

[2.x] feat: setting to force a FontAwesome icon style forum-wide - #4868

Merged
imorland merged 1 commit into
2.xfrom
im/fa-forced-style
Jul 31, 2026
Merged

[2.x] feat: setting to force a FontAwesome icon style forum-wide#4868
imorland merged 1 commit into
2.xfrom
im/fa-forced-style

Conversation

@imorland

Copy link
Copy Markdown
Member

Changes proposed in this pull request

Adds a Forced Icon Style setting (fontawesome_forced_style, default empty = zero behavior change) to the FontAwesome section of the admin Advanced page. When set — e.g. fa-duotone fa-light, or simply fa-regular — every icon rendered through the Icon component swaps its declared style classes for the configured one, giving forums with FontAwesome Pro a uniform icon style without forking extensions.

  • Recognition is a closed style-class list, both syntaxes per family (fas/fa-solid, far/fa-regular, light/thin/duotone, the sharp variants, bare fa). Deliberately not pattern-based: icon names (fa-lightbulb) and utility classes (fa-fw, fa-spin, fa-2x) also start with fa- and pass through untouched.
  • Brand icons are never rewritten — their glyphs only exist in the brands family; forcing a style would blank every GitHub/Discord icon.
  • noStyleOverride prop on Icon is the per-icon escape hatch, for icons whose style is their meaning (the solid vs regular star conveying starred state). Stripped before the DOM spread, pinned by test.
  • The forum attribute only ships when the feature is on (visible() guard), and non-string icon names pass through instead of throwing mid-render (an Icon without a name previously took down the whole mithril tree during live testing — now pinned).
  • tags' tagIcon helper renders through Icon — previously it built <i> directly, so the tag sidebar (the most visible icon surface on most forums) bypassed the setting entirely.
  • Input.less fix found during live testing: FA's duotone CSS sets position: relative on the icon element itself (for its two-glyph ::after layering) and loads after our stylesheet at equal specificity — popping the search box's prefix icon out of the input into normal flow. Pinning position: absolute !important follows the exact pattern that block already documents for FA Kit's injected width/display styles, and duotone renders correctly on any non-static position.

The style must be available in the forum's configured icon source — most styles need FontAwesome Pro; the setting's help text says so.

Reviewers should focus on

  • The style-class list in applyIconStyle.ts (22 table-driven unit tests: every family in both syntaxes, sharp compounds replaced atomically, brands exemption, fa-lightbulb-style false positives, utility passthrough, duplicate-style collapse, non-string names).
  • Icon component tests: set/unset behavior, brands, noStyleOverride (including that it doesn't leak as a DOM attribute).
  • Verified live with fa-duotone fa-light and fa-light: 117/122 icons rewritten on the index page, brands intact, clean console, search box intact.

Confirmed

  • Frontend changes: tests are green (yarn jest), typings check passes.
  • Backend changes: tests are green (run composer test).

Adds fontawesome_forced_style (default empty = no behavior change) to
the FontAwesome section of the admin Advanced page. When set — e.g.
'fa-duotone fa-light' or 'fa-regular' — every icon rendered through the
Icon component swaps its declared style classes for the configured one.

Both syntaxes are recognized for every family (fas/fa-solid,
far/fa-regular, ..., sharp variants, bare fa), via a closed style-class
list: icon names (fa-lightbulb) and utility classes (fa-fw, fa-spin)
also start with fa- and must pass through untouched. Brand icons are
never rewritten — their glyphs only exist in the brands family. A
noStyleOverride prop on Icon is the per-icon escape hatch for icons
whose style IS their meaning (solid vs regular star for starred state).
Non-string names pass through instead of throwing mid-render.

The forum attribute only ships when the feature is on. tags' tagIcon
helper now renders through the Icon component so tag icons — the most
visible icon surface — honor the forced style too. Input.less pins
position on prefix icons with !important, matching the file's existing
FA-cascade workarounds: FA's duotone CSS sets position: relative on the
icon element after our equal-specificity rule, which popped the search
icon out of its input.
@imorland
imorland requested a review from a team as a code owner July 31, 2026 12:56
@imorland imorland added this to the 2.0.0-rc.6 milestone Jul 31, 2026
@imorland
imorland merged commit 205fde8 into 2.x Jul 31, 2026
25 checks passed
@imorland
imorland deleted the im/fa-forced-style branch July 31, 2026 13:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant