Skip to content

[TASK] Upgrade FontAwesome from v6 to v7#1268

Open
richardkrikler wants to merge 1 commit into
TYPO3-Documentation:mainfrom
richardkrikler:task/fontawesome-upgrade
Open

[TASK] Upgrade FontAwesome from v6 to v7#1268
richardkrikler wants to merge 1 commit into
TYPO3-Documentation:mainfrom
richardkrikler:task/fontawesome-upgrade

Conversation

@richardkrikler
Copy link
Copy Markdown
Contributor

@richardkrikler richardkrikler commented May 26, 2026

Solves #1171

  • shorthand classes (v5) classes got transformed:
    from just fas/ far/ fab
    to: fa-classic/ fa-duotone/ fa-sharp +
    fa-solid (fas)
    fa-regular (far)
    fa-brands (fab)
    [1]
  • some icons got renamed - used ones here:
    fa-home => fa-house
    fa-search => fa-magnifying-glass
    fa-search-plus => fa-magnifying-glass-plus
    fa-info-circle => fa-circle-info
    fa-cog => fa-gear
    fa-file-alt => fa-file-lines
  • FontAwesome now ships woff2 instead of ttf font-files [2]
  • Support for @import got removed - migrated to @use [3][4]
    For icons referenced within other scss stylesheets, _fontawesome.scss defines variables & mixins.
    These mixins are then available through the import of _fontawesome.scss in theme.scss
  • All FA icons now ship with fixed widht by default. [5]
    In order to remain current styling --fa-width is overwritten in _fontawesome.scss.

[1] https://docs.fontawesome.com/upgrade/upgrade-from-older-versions
[2] https://docs.fontawesome.com/upgrade/whats-changed#webfont-format-modernization
[3] https://docs.fontawesome.com/upgrade/whats-changed#sassscss-improvements
[4] https://sass-lang.com/documentation/at-rules/import/
[5] https://docs.fontawesome.com/upgrade/whats-changed#fixed-width-icons-by-default

@richardkrikler
Copy link
Copy Markdown
Contributor Author

richardkrikler commented May 26, 2026

As a followup, I'd like to fully migrate the current scss system from deprecated @import to @use/ @forward.
https://sass-lang.com/documentation/at-rules/import/

=> #1269

Solves TYPO3-Documentation#1171

* shorthand classes (v5) classes got transformed:
  from just `fas`/ `far`/ `fab`
  to: fa-classic/ fa-duotone/ fa-sharp +
    fa-solid (fas)
    fa-regular (far)
    fa-brands (fab)
  [1]
* some icons got renamed - used ones here:
  fa-home => fa-house
  fa-search => fa-magnifying-glass
  fa-search-plus => fa-magnifying-glass-plus
  fa-info-circle => fa-circle-info
  fa-cog => fa-gear
  fa-file-alt => fa-file-lines
* FontAwesome now ships woff2 instead of ttf font-files [2]
* Support for `@import` got removed - migrated to `@use` [3][4]
  For icons referenced within other scss stylesheets,
    `_fontawesome.scss` defines variables & mixins.
  These mixins are then available through
    the import of `_fontawesome.scss` in `theme.scss`
* All FA icons now ship with fixed widht by default. [5]
  In order to remain current styling `--fa-width`
    is overwritten in `_fontawesome.scss`.

[1] https://docs.fontawesome.com/upgrade/upgrade-from-older-versions
[2] https://docs.fontawesome.com/upgrade/whats-changed#webfont-format-modernization
[3] https://docs.fontawesome.com/upgrade/whats-changed#sassscss-improvements
[4] https://sass-lang.com/documentation/at-rules/import/
[5] https://docs.fontawesome.com/upgrade/whats-changed#fixed-width-icons-by-default
@richardkrikler richardkrikler force-pushed the task/fontawesome-upgrade branch from 1194df3 to 560801e Compare May 26, 2026 07:18
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.

1 participant