docsy icon indicating copy to clipboard operation
docsy copied to clipboard

FontAwesome 7 upgrade

Open chalin opened this issue 3 months ago • 0 comments

References:

  • https://fontawesome.com/changelog
  • https://docs.fontawesome.com/upgrade/upgrade-from-older-versions
  • Previous upgrade:
    • #1102
    • #1171

Depends on:

  • #2279

When migrating from FA6 → FA7 (draft notes):

Icons are fixed-width by default

  • In v7 every icon renders at a fixed width (the “Icon Canvas”).
  • The old fa-fw utility is removed. If you were using it, you now get that behavior automatically.
  • If you need the old variable (auto) width, add fa-width-auto. (What's Changed in v7)
    <!-- v6 style (now unnecessary) -->
    <i class="fa-solid fa-user fa-fw"></i>
    
    <!-- v7 default is fixed width; for auto width do this: -->
    <i class="fa-solid fa-user fa-width-auto"></i>
    

Sass/SCSS breaking changes

  • Move to Dart Sass and @use (no more @import).
  • The fa- prefix was removed from variables, mixins, and functions; you now reference them via the fa namespace, e.g. $fa-font-pathfa.$font-path.
  • Legacy mixins like fa-icon-* and fa-family-* were removed; use the new per-style icon() mixins.
  • _fixed-width partial renamed to _fa-widths.
  • sr-only / sr-only-focusable classes were removed (roll your own if you still need them).
  • “Bordered” and “pulled” styles split into separate partials (bordered icons are slated for deprecation in a future release). (Upgrade to v7 with Sass)

References

chalin avatar Sep 26 '25 23:09 chalin