FontAwesome 7 upgrade

[chalin]

References:

• https://fontawesome.com/changelog
• https://docs.fontawesome.com/upgrade/upgrade-from-older-versions
• Previous upgrade:
  • Upgrade to FontAwesome 6 #1102
  • FontAwesome 6 upgrade: followup items #1171

Depends on:

• Drop libsass, use dart sass instead #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-path → fa.$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

• Upgrade to v7 from Older Versions