快速查找 FontAwesome 图标库的类名、尺寸、动画和版本信息
通过以下类名快速调整图标尺寸。所有尺寸相对于父元素的 font-size 计算。
| 类名 | 缩放比例 | 示例 |
|---|---|---|
fa-xs | 0.75em | |
fa-sm | 0.875em | |
fa-lg | 1.33em | |
fa-2x | 2em | |
fa-3x | 3em | |
fa-4x | 4em | |
fa-5x | 5em | |
fa-6x | 6em | |
fa-7x | 7em | |
fa-8x | 8em | |
fa-9x | 9em | |
fa-10x | 10em |
为图标添加动画效果，提升交互体验。动画类名可以叠加使用。
| 类名 | 效果描述 | 示例 |
|---|---|---|
fa-spin | 连续旋转动画 | |
fa-pulse | 8 步脉冲旋转 | |
fa-beat | 缩放跳动动画 | |
fa-fade | 淡入淡出效果 | |
fa-beat-fade | 跳动与淡出组合 | |
fa-flip | 3D 翻转动画 | |
fa-shake | 抖动摇晃效果 |
控制图标的旋转角度和翻转方向，适用于箭头、方向指示器等场景。
| 类名 | 效果 | 示例 |
|---|---|---|
fa-rotate-90 | 顺时针旋转 90° | |
fa-rotate-180 | 顺时针旋转 180° | |
fa-rotate-270 | 顺时针旋转 270° | |
fa-flip-horizontal | 水平翻转（左右镜像） | |
fa-flip-vertical | 垂直翻转（上下镜像） | |
fa-flip-both | 水平+垂直同时翻转 |
不同版本的 CSS 类名前缀有所差异。从 v6 开始，前缀采用全拼形式，更方便记忆。
| 风格 | v7 | v6 | v5 | v4 |
|---|---|---|---|---|
| Solid（实心） | fa-solid | fa-solid | fas | fa |
| Regular（空心） | fa-regular | fa-regular | far | — |
| Brands（品牌） | fa-brands | fa-brands | fab | — |
| Light（细体） | Pro 版 | Pro 版 | — | |
| Thin（极细） | Pro 版 | — | — | |
| Duotone（双色） | Pro 版 | Pro 版 | — | |
| Sharp（锐利） | Pro 版 | — | — | |
各版本的核心指标对比，帮助您快速了解版本差异。
| 特性 | v4 | v5 | v6 | v7 |
|---|---|---|---|---|
| 发布时间 | 2014 | 2018 | 2022 | 2025 |
| 免费图标数 | ~600 | ~1,500 | ~2,000 | ~2,500 |
| 免费风格数 | 1 (Solid) | 3 (Solid/Regular/Brands) | 3 (Solid/Regular/Brands) | 3 (Solid/Regular/Brands) |
| SVG 框架 | 否 | 是 | 是 (增强) | 是 (性能 +30%) |
| SVG Sprites | 否 | 是 | 是 | 是 |
| ESM 按需加载 | 否 | 否 | 基础 | 完善 |
| React/Vue 组件 | 否 | 是 | 是 | 是 |
| CSS 前缀 | fa | fas/far/fab | fa-solid/regular/brands | fa-solid/regular/brands |
| npm 包名 | font-awesome | @fortawesome/fontawesome-free | @fortawesome/fontawesome-free | @fortawesome/fontawesome-free |
| 维护状态 | 已停止 | 安全更新 | 活跃维护 | 最新版 |