Auto convert FontAwesome class names between versions
| Change | Description | Impact |
|---|---|---|
fa- prefix | Base class fa no longer works automatically; must use fa-solid/fa-regular/fa-brands explicitly | High |
| Icon renames | Approximately 50 icon names changed to resolve naming conflicts | Medium |
| CSS variables | New CSS custom properties added, legacy CSS variables deprecated | Medium |
| SVG framework | SVG framework configuration options adjusted, some legacy configs no longer compatible | Low |
| JS API | Some JavaScript methods marked as deprecated or removed | Low |
| Removed icons | A very small number of brand icons with expired trademarks removed | Low |
Update CDN or package version to 7.0.0:
<!-- Old v6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- New v7 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
<!-- NPM update -->
npm install @fortawesome/[email protected]Ensure all icons use complete prefixes:
<!-- Old style (partially works in v6, no longer supported in v7) -->
<i class="fa fa-user"></i>
<!-- New style (required in v7) -->
<i class="fa-solid fa-user"></i>
<i class="fa-regular fa-user"></i>The following icons have been renamed in v7:
| Old Name (v6) | New Name (v7) |
|---|---|
fa-adjust | fa-circle-half-stroke |
fa-car | fa-car-side |
fa-clock | fa-clock-four |
fa-edit | fa-pen-to-square |
fa-remove | fa-xmark |
fa-times | fa-xmark |
If using the SVG framework, adjust configuration:
// v6 old config
FontAwesomeConfig = { autoReplaceSvg: 'nest' };
// v7 new config
FontAwesomeConfig = { autoReplaceSvg: 'async' };Thoroughly check icon display and functionality in a staging environment before deploying to production.
v7 removed auto-completion for the fa prefix. All icons must explicitly specify a prefix:
fa-solid fa-icon-name - Solid stylefa-regular fa-icon-name - Regular stylefa-brands fa-icon-name - Brand iconsv7 introduces new CSS variable naming conventions. Old variable --fa-primary-color changed to --fa-primary-color-h, --fa-primary-color-s, --fa-primary-color-l.
The following JavaScript APIs have been removed: fontawesome.dom.i2svg(), fontawesome.dom.css(). Use fontawesome.dom.watch() as a replacement.
If you encounter any issues during upgrade, refer to these resources: