自动转换不同版本间的 FontAwesome 类名
| 变更项 | 说明 | 影响程度 |
|---|---|---|
| SVG 框架 | v6 默认使用 SVG 框架替代 Web Font,提供更好的渲染效果 | 中 |
| 图标重命名 | 约 50 个图标名称发生变化,以保持命名一致性 | 中 |
| 包名变更 | npm 包名从 @fortawesome/fontawesome-free 保持不变,但内部文件结构调整 | 低 |
| 免费图标 | 新增超过 1,600 个免费图标,总数达到 2,000+ | 无 |
<!-- CDN 方式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- npm 方式 -->
npm install @fortawesome/[email protected]v6 的前缀系统与 v5 基本一致,但建议确认所有图标使用正确前缀:
<i class="fas fa-user"></i> <!-- Solid -->
<i class="far fa-user"></i> <!-- Regular -->
<i class="fab fa-github"></i> <!-- Brands -->| 原名称 (v5) | 新名称 (v6) |
|---|---|
fa-contact-card | fa-id-card |
fa-glasses | fa-glasses-round |
fa-helicopter | fa-helicopter-symbol |
在测试环境中全面检查图标显示,确认无误后部署到生产环境。