Font Awesome 7#37
Conversation
📝 WalkthroughWalkthroughThis update upgrades Font Awesome from version 6.7.2 to 7.0.0, updating all related CSS, JS, and license files to the new version. It also adds the full SCSS source for Font Awesome 7, including core, utility, icon, and shim modules, and updates the build scripts to copy the SCSS directory. The FontAwesome devDependency is bumped to v7. Changes
Estimated code review effortScore: 4 (~90–120 minutes)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (16)
package.json (1)
8-8: Version range^7is fine, but consider pinning the minor to avoid sudden breaking changes.Font Awesome occasionally introduces icon/name churn in minors. Locking to
7.0.xuntil you actively decide to bump may save consumers from surprises.res/fontawesome/css/v4-font-face.css (1)
7-10: Optional: differentiate font weights for clearer renderingAll three faces share the same
font-familyand omitfont-weight. In FA 5+ the solid variant is usually declared withfont-weight: 900to letfont-weight-based selectors pick the correct face.
If any custom CSS targets.fa-solid { font-weight: 900; }, those rules will no longer select the solid glyphs.Consider adding explicit weight declarations, e.g.:
@font-face { font-family: "FontAwesome"; + font-weight: 900; font-display: block; src: url("../webfonts/fa-solid-900.woff2") format("woff2"); }Same idea for regular/brands (400).
res/fontawesome/scss/_list.scss (1)
13-18: Provide legacy fallback forinset-inline-startLogical property support is still incomplete in older Chromium/WebKit. To prevent icons being misplaced, add a fallback using
leftwhen the document direction is LTR:.#{v.$css-prefix}-li { - inset-inline-start: calc(-1 * var(--#{v.$css-prefix}-li-width, #{v.$li-width})); + inset-inline-start: calc(-1 * var(--#{v.$css-prefix}-li-width, #{v.$li-width})); + // Fallback for browsers without logical properties + @include v.if-ltr { + left: calc(-1 * var(--#{v.$css-prefix}-li-width, #{v.$li-width})); + }(Requires a tiny mixin in
variablesor_mixins.scss.)res/fontawesome/scss/_core.scss (1)
17-29::is()selector may break IE11 / legacy browser supportThe
:is()pseudo-class is great for reducing selector duplication but it is not recognised by IE 11 or very old Chromium / Safari versions.
If the extension still claims compatibility with these engines you might want to add a@supports not selector(:is(.a,.b))fallback, or keep the duplicated selector list as in FA 6.res/fontawesome/scss/solid.scss (1)
41-50: Heavy use of@extendcan explode compiled CSS size
@extend .#{v.$css-prefix}-solid;and the subsequent extend will copy every selector that ever includes those utility classes into each generated rule.
With thousands of icons this can noticeably bloat the compiled CSS. A mixin that directly emits the needed declarations is typically safer for library code.res/fontawesome/scss/_sizing.scss (2)
8-11: Arithmetic expression readability
font-size: $i * 1em;is valid Sass, but writingfont-size: #{$i}em;is marginally clearer and avoids the intermediate calc step some compilers output when$iis not resolved at compile-time.
14-18: Guard against empty$sizesmapIf a consumer overrides
v.$sizeswith an empty map the loop still generates a trailing empty rule block.
Adding@if length(v.$sizes) > 0 { … }prevents superfluous output.res/fontawesome/scss/brands.scss (1)
30-34: Generated icon classes might hit selector size limitsThe
@eachloop will output one selector per brand icon (~700 items).
Older versions of IE cap selectors per stylesheet at 4095 and some CMS concatenation pipelines have similar limits. Consider chunking the output or allowing selective icon inclusion through a build flag.res/fontawesome/scss/regular.scss (1)
43-50: Guard against accidental double-quoting incontent
string.unquote("\"#{ $var }\"")works, but is fragile if$varalready contains quotes. A more defensive pattern:- content: string.unquote("\"#{ $var }\""); + content: unquote("#{ $var }");Same output, fewer escape layers.
res/fontawesome/scss/_bordered.scss (2)
5-9: Typo & punctuation in deprecation noticeMinor, but this block is user-facing documentation.
- - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8. + - You may continue to use it in this version (*v7*), but it will not be supported in Font Awesome v8.
11-15: Broken interpolation inside comment
--@{v.$css-prefix}should read--#{v.$css-prefix}for consistency and copy-paste safety when users lift the snippet.res/fontawesome/css/svg.min.css (1)
1-6: Consider omitting minified artifacts from VCSCommitted build assets bloat the repo and increase diff noise. Publishing the un-minified SCSS/CSS and generating minified output during release/build (e.g. via CI) keeps history readable.
res/fontawesome/scss/_stacked.scss (1)
20-21:z-indexdefault ofautocan break stacking orderIf two stacked icons share the same default, their painting order is undefined. A small positive integer (e.g.
1) gives predictable behaviour without impacting consumers who override via the CSS variable.- z-index: var(--#{v.$css-prefix}-stack-z-index, #{v.$stack-z-index}); + z-index: var(--#{v.$css-prefix}-stack-z-index, 1);res/fontawesome/scss/_mixins.scss (1)
6-21: Expose@contentblock for greater extensibilityDownstream consumers sometimes need to append extra declarations when invoking
fa-icon.
Adding an optional@contentat the end of the mixin keeps full backward-compatibility yet allows overrides without wrapper mixins.@mixin fa-icon($family: v.$family) { ... width: var(--#{v.$css-prefix}-width, #{v.$fw-width}); + + @content; // optional, executed in caller’s scope }res/fontawesome/scss/_shims.scss (1)
1-10: Generated shim table is huge – consider a programmatic build stepMore than 2 000 individual selectors are hard-to-diff and balloon the repo.
Upstream Font Awesome builds these mappings from JSON → SCSS ✕ template; mirroring that build (and committing only the artefact indist/) would:• Avoid merge-conflicts when v7.x releases drop
• Make review diffs human-sized
• Keep source of truth in data, not hand-written codeNo blocker, just a maintainability heads-up.
res/fontawesome/js/conflict-detection.js (1)
10-10: Remove redundant 'use strict' directive.JavaScript modules are automatically in strict mode, making this directive unnecessary.
-}(this, (function () { 'use strict'; +}(this, (function () {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (16)
package-lock.jsonis excluded by!**/package-lock.jsonres/fontawesome/js/all.min.jsis excluded by!**/*.min.jsres/fontawesome/js/brands.min.jsis excluded by!**/*.min.jsres/fontawesome/js/conflict-detection.min.jsis excluded by!**/*.min.jsres/fontawesome/js/fontawesome.min.jsis excluded by!**/*.min.jsres/fontawesome/js/regular.min.jsis excluded by!**/*.min.jsres/fontawesome/js/solid.min.jsis excluded by!**/*.min.jsres/fontawesome/js/v4-shims.min.jsis excluded by!**/*.min.jsres/fontawesome/webfonts/fa-brands-400.ttfis excluded by!**/*.ttfres/fontawesome/webfonts/fa-brands-400.woff2is excluded by!**/*.woff2res/fontawesome/webfonts/fa-regular-400.ttfis excluded by!**/*.ttfres/fontawesome/webfonts/fa-regular-400.woff2is excluded by!**/*.woff2res/fontawesome/webfonts/fa-solid-900.ttfis excluded by!**/*.ttfres/fontawesome/webfonts/fa-solid-900.woff2is excluded by!**/*.woff2res/fontawesome/webfonts/fa-v4compatibility.ttfis excluded by!**/*.ttfres/fontawesome/webfonts/fa-v4compatibility.woff2is excluded by!**/*.woff2
📒 Files selected for processing (37)
package.json(1 hunks)res/fontawesome/LICENSE.txt(2 hunks)res/fontawesome/css/brands.min.css(1 hunks)res/fontawesome/css/regular.css(1 hunks)res/fontawesome/css/regular.min.css(1 hunks)res/fontawesome/css/solid.css(1 hunks)res/fontawesome/css/solid.min.css(1 hunks)res/fontawesome/css/svg-with-js.css(4 hunks)res/fontawesome/css/svg-with-js.min.css(1 hunks)res/fontawesome/css/svg.css(1 hunks)res/fontawesome/css/svg.min.css(1 hunks)res/fontawesome/css/v4-font-face.css(1 hunks)res/fontawesome/css/v4-font-face.min.css(1 hunks)res/fontawesome/css/v4-shims.min.css(1 hunks)res/fontawesome/css/v5-font-face.css(1 hunks)res/fontawesome/css/v5-font-face.min.css(1 hunks)res/fontawesome/js/conflict-detection.js(20 hunks)res/fontawesome/js/v4-shims.js(10 hunks)res/fontawesome/scss/_animated.scss(1 hunks)res/fontawesome/scss/_bordered.scss(1 hunks)res/fontawesome/scss/_core.scss(1 hunks)res/fontawesome/scss/_fa.scss(1 hunks)res/fontawesome/scss/_functions.scss(1 hunks)res/fontawesome/scss/_icons.scss(1 hunks)res/fontawesome/scss/_list.scss(1 hunks)res/fontawesome/scss/_mixins.scss(1 hunks)res/fontawesome/scss/_pulled.scss(1 hunks)res/fontawesome/scss/_rotated-flipped.scss(1 hunks)res/fontawesome/scss/_shims.scss(1 hunks)res/fontawesome/scss/_sizing.scss(1 hunks)res/fontawesome/scss/_stacked.scss(1 hunks)res/fontawesome/scss/_widths.scss(1 hunks)res/fontawesome/scss/brands.scss(1 hunks)res/fontawesome/scss/fontawesome.scss(1 hunks)res/fontawesome/scss/regular.scss(1 hunks)res/fontawesome/scss/solid.scss(1 hunks)res/fontawesome/scss/v4-shims.scss(1 hunks)
🪛 Biome (1.9.4)
res/fontawesome/js/conflict-detection.js
[error] 10-10: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.
(lint/suspicious/noRedundantUseStrict)
[error] 72-72: Do not reassign a function declaration.
Reassigned here.
Use a local variable instead.
(lint/suspicious/noFunctionAssign)
res/fontawesome/js/v4-shims.js
[error] 10-10: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.
(lint/suspicious/noRedundantUseStrict)
🧰 Additional context used
🪛 Biome (1.9.4)
res/fontawesome/js/conflict-detection.js
[error] 10-10: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.
(lint/suspicious/noRedundantUseStrict)
[error] 72-72: Do not reassign a function declaration.
Reassigned here.
Use a local variable instead.
(lint/suspicious/noFunctionAssign)
res/fontawesome/js/v4-shims.js
[error] 10-10: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.
(lint/suspicious/noRedundantUseStrict)
🔇 Additional comments (42)
res/fontawesome/LICENSE.txt (1)
26-26: License year bump looks correct.Year update is in line with the Font Awesome 7 upgrade and doesn’t introduce any legal text changes.
No action required.Also applies to: 126-126
res/fontawesome/css/v5-font-face.min.css (1)
2-6: Verify the mixed “Font Awesome 5” family names under a 7.0.0 banner.The header advertises 7 .x but the
@font-faceblocks still exposefont-family:"Font Awesome 5 …".
This is expected for v5-shim assets, but double-check that:
- These files are only shipped for the v5-shim use-case.
- No direct imports elsewhere expect
Font Awesome 7 Freeyet load this file.If accidental, regenerate the v7 font-face file with the proper families.
res/fontawesome/scss/_fa.scss (1)
1-3: Nice aggregation module.
@forwardtrio keeps downstream imports clean – good choice.res/fontawesome/scss/_functions.scss (1)
5-8: Function implementation matches upstream – LGTM.Whitespace inside interpolation is harmless; compile output is identical to upstream Font Awesome source.
res/fontawesome/scss/v4-shims.scss (1)
9-11: Check SASS include-paths for the new@usetargets
@use 'functions';,@use 'variables' as v;, and@use 'shims';assume that the build tool’s load-path already contains the Font Awesome SCSS directory.
If the extension’s build pipeline was previously only compiling the top-level CSS files, it may now fail with “module not found” errors.Make sure the Sass compiler (e.g.
sass-loader,dart-sass, orscssphp) is invoked with--load-path=res/fontawesome/scss(or equivalent) or that these files are copied into an existing include-path.res/fontawesome/css/v4-font-face.min.css (1)
6-6: Removal of TTF fallback – double-check legacy browser supportThe minified block now serves only WOFF2 files.
That’s perfectly fine for all evergreen browsers (Chrome ≥ 36, Firefox ≥ 39, Edge, Safari ≥ 14), but it drops support for IE 11 and very old mobile browsers. If that audience is still relevant for this MediaWiki extension, consider keeping a TTF (or WOFF) fallback.No action needed if IE 11 is officially unsupported.
res/fontawesome/css/v5-font-face.css (1)
7-17: Font-family names intentionally keep the “5” suffix – LGTMAlthough we’re shipping Font Awesome 7 assets, the font-family strings remain
"Font Awesome 5 Free"/"Font Awesome 5 Brands". This is by design upstream to avoid a breaking change in user CSS. Nothing to fix here.Also applies to: 19-23
res/fontawesome/scss/_widths.scss (1)
5-12: Verify that$fw-widthis defined in_variables.scssThis partial depends on
v.$fw-width. If that variable was renamed or removed in FA 7, Sass compilation will break with an undefined variable error. A quick grep in the upstream SCSS shows it still exists, but double-check the build output.res/fontawesome/css/v4-shims.min.css (1)
2-6: No concerns – upstream-generated minified asset looks saneHeader bump to 2025 and font-family rename to “Font Awesome 7 Free/Brands” match the upstream 7.0.0 release; nothing custom to maintain here.
res/fontawesome/scss/_rotated-flipped.scss (1)
17-28: Transforms from multiple helper classes overwrite each otherBecause each helper sets the full
transformproperty, stacking e.g..fa-flip-horizontalwith.fa-rotate-90will result in only the later rule winning.
Upstream FA keeps this limitation, but if you want true composability you’d need a single custom property‐based approach (e.g.--fa-transform) and concatenate in thetransformdeclaration.res/fontawesome/scss/fontawesome.scss (1)
1-5: Header is correct & completeVersion, license URLs and copyright year align with FA 7.
res/fontawesome/scss/_core.scss (1)
27-28: Doublecontentproperty – verify expected cascadeThe second declaration
content: var(#{v.$icon-property})/"";relies on the somewhat obscure fallback hack Font Awesome uses for Safari.
Please double-check that your chosen Sass compiler preserves the entire token sequence unchanged – some minifiers rewrite or drop the slash syntax.res/fontawesome/css/regular.min.css (1)
2-6: Minified vendor asset – no manual review requiredThis file is a direct upstream artefact. Consider excluding minified sources from code review and relying on checksum / licence verification instead.
res/fontawesome/scss/brands.scss (1)
38-45: Mixin parameter clashes with_core.scssusageHere the
icon($var)mixin requires an argument, while_core.scss’sfa-icon()was used with zero args.
Please ensure the differing arity is intentional and the public mixin names will not confuse users.res/fontawesome/scss/_stacked.scss (1)
5-12: Hard-coded 2 em box may clip oversized icons
height/width/line-height: 2emassumes icons never exceed the canonical square. The new FA7 “jelly” and “thumbprint” sets have exaggerated ascenders that may overflow. Consider usingmin-properties or allowing size override via a CSS variable (--fa-stack-size, etc.).res/fontawesome/css/solid.min.css (1)
2-6: Vendor bump looks fineFile matches upstream v7.0.0 header & root-vars. Nothing to flag.
res/fontawesome/css/brands.min.css (1)
1-6: Confirm older Safari/IE fall-back requirementsMinified vendors now ship WOFF2 only.
If you still target Safari < 14 or Win 7 IE11 inside corporate intranets, you’ll need an additional WOFF file. Otherwise you’re good.
Just double-check your compatibility matrix.res/fontawesome/css/svg-with-js.min.css (1)
6-6: Logical properties might break < Chrome 69
float:inline-start|inline-end&inset-inline-startare great, but they silently fall back tofloat:left/right=autoin older engines.
If you still ship to those, keep the classic declarations behind an@supports not (float:inline-start)guard.Example patch outside minified bundle:
@supports not (float:inline-start) { .fa-pull-start { float:left; margin-right:.3em; } .fa-pull-end { float:right; margin-left:.3em; } }res/fontawesome/scss/_animated.scss (3)
1-79: Well-structured animation classes with good customization supportThe animation classes are well-implemented using CSS custom properties for flexibility and consistent naming patterns. The clever reuse of the spin animation for spin-reverse by only changing the direction is efficient.
81-97: Excellent accessibility implementationGreat job implementing the
prefers-reduced-motionmedia query to respect user preferences. The comprehensive approach of disabling both animations and transitions with!importantensures accessibility compliance.
99-150: Well-crafted keyframe animationsThe keyframe animations are expertly designed with appropriate timing and transformations. The use of CSS custom properties for parameters like scale, opacity, and rotation angles provides excellent customization options.
res/fontawesome/css/svg.css (3)
6-35: Comprehensive font family definitions for Font Awesome 7The CSS custom properties correctly define all Font Awesome 7 font families, including the new style families. The consistent naming pattern and font stack structure are well-implemented.
37-68: Modern SVG styling with excellent internationalization supportGreat implementation using logical properties (
inset-inline-start,inset-block-start) for better RTL/LTR support. The precise vertical alignment adjustments for each size modifier ensure consistent icon positioning.
69-182: Robust layering and color control systemExcellent implementation of the layering system with comprehensive positioning options for counters and text. The color control for primary/secondary elements and proper masking support enable advanced icon compositions.
res/fontawesome/css/solid.css (2)
6-11: Clean migration to Font Awesome 7 variable structureGood implementation using variable references and providing a clear deprecation notice for the legacy custom property. This approach ensures smooth migration for users.
13-19: Simplified font loading with WOFF2 onlyGood decision to remove the TTF fallback and use only WOFF2 format, which has excellent browser support and better compression. This reduces the font loading complexity and improves performance.
res/fontawesome/css/regular.css (1)
1-31: Consistent implementation with solid.cssThe regular font style implementation perfectly mirrors the structure of solid.css with appropriate adjustments for font weight (400). The consistent approach across style files will make maintenance easier.
res/fontawesome/js/v4-shims.js (4)
12-27: Improved compatibility with var declarationsGood change from
lettovarfor broader JavaScript environment compatibility, which is important for a shims file that needs to work in legacy contexts.
28-94: Comprehensive array handling utilities for legacy supportExcellent addition of helper functions to handle array operations without relying on native spread syntax. The
_toConsumableArrayand related functions provide robust compatibility for older JavaScript environments while maintaining modern coding patterns.
96-571: Comprehensive Font Awesome 7 family mappingsExcellent expansion of style family mappings to support all new Font Awesome 7 families including slab, thumbprint, whiteboard, notdog, etch, jelly, and chisel. The consistent structure and bidirectional mappings ensure proper compatibility.
615-643: Smart refactoring for maximum compatibilityGood refactoring to use
applymethod instead of spread syntax in both thebunkerfunction and the shims array push operation. This ensures the shims work correctly in older JavaScript environments that don't support spread syntax.res/fontawesome/js/conflict-detection.js (5)
2-4: Version and copyright updates look good.The upgrade to Font Awesome 7.0.0 and copyright year update to 2025 are correctly applied.
12-87: Standard Babel helper functions for ES5 compatibility.These helper functions enable modern JavaScript features (spread syntax, iterables) to work in older browsers. This is a good approach for ensuring broader compatibility.
89-121: ES5-compatible variable declarations and function syntax.The refactoring from const/let to var and arrow functions to traditional function expressions ensures compatibility with older browsers. The initialization pattern is maintained correctly.
899-1414: Comprehensive Font Awesome 7 style family mappings.The expansion to include new style families (slab, whiteboard, thumbprint, notdog, etch, jelly, chisel) is properly implemented with:
- Consistent prefix-to-style mappings
- Proper weight configurations
- Fallback handling via familyProxy
- All required mapping objects (z, io, Ro, etc.)
This aligns with Font Awesome 7's expanded icon style offerings.
1416-1427: Correct ES5-compatible argument passing in bunker function.The change from spread syntax to
fn.apply(void 0, args)properly maintains functionality while ensuring ES5 compatibility.res/fontawesome/css/svg-with-js.css (6)
2-4: Version and copyright updates are consistent.The CSS file correctly reflects the Font Awesome 7.0.0 upgrade and 2025 copyright.
6-35: Comprehensive Font Awesome 7 font family definitions.All font family custom properties correctly updated to Font Awesome 7, including the new style families. The font weights are appropriately set for each variant.
37-77: Excellent SVG styling improvements with logical properties.The changes improve:
- Consistent box model with
content-box- Flexible width control via custom properties
- Precise vertical alignment for all size variants
- Better internationalization with logical properties (
inline-start,inline-end)These updates align with modern CSS best practices.
258-275: Clear deprecation notice for bordered icons.Good documentation of the deprecation timeline (removal in v8). The updated border implementation maintains compatibility while adding
content-boxsizing for consistency.
365-378: Improved accessibility with comprehensive reduced motion support.The media query now properly disables both animations and transitions with
!important, ensuring users with motion preferences have a static experience.
496-521: Well-structured duotone icon color controls.The primary/secondary color system with opacity controls and swap functionality provides flexible theming options for duotone icons. The mask fill ensures proper rendering.
|
I have not done any investigation, but are there any possible backward incompatible changes in icon names or styles or anything else that we should care about? |
|
From the looks and reading, the creators of Font Awesome did their best to maintain backward compatibility. I created a test page with all FA 6 font names and they are all still present with FA 7, with both renders. If there are incompatible changes they should be in the changelog: https://fontawesome.com/changelog It just seems to be a little more trouble to use FA7 as the icon font of the Chameleon skin as FA6 would be, but I see no problems with this extension, even under Chameleon. I'm still working on how to use FA7 as the icon font of the Chameleon skin. |
|
The new icons: |
2 participants
Font Awesome 7 is Now Available! So let's bring the extension to that version as well.
Summary by CodeRabbit
New Features
Bug Fixes
Chores