网页字体与 SVG
网页字体从 Font Awesome 最初的版本开始就一直使用，并且仍然是可靠的工作马。SVG 是新秀，拥有许多额外的技巧和功能。哪一个适合您呢？
网页字体 + CSS
图标网页字体就是这样的 - 由图标组成的字体。我们将图标字体与 CSS 配合使用，以实现 Font Awesome 图标在您的应用、网站和其他 Web 项目中无缝显示的魔力。
超能力
- 最易于设置和使用
- 可靠且成熟的技术
- 可在 CSS 的伪元素中使用，以在不触碰 HTML 的情况下显示图标
- 每个图标都可以通过其唯一的统一码值进行引用
- 分批放入子集中以提高性能
弱点
- 无法执行某些高级 样式技巧
- 无法执行自动无障碍性（除非在工具包中）
SVG + JS
SVG 是基于矢量的图像，使用浏览器的引擎进行渲染。我们将其与 javascript 配合使用，将 Font Awesome 图标的魔力引入您的应用、网站和其他 Web 项目。
超能力
- 非常适合通过我们的 JS 包渲染的基于 javascript 的应用
- 能够执行一些花哨的技巧，例如 遮罩、分层 和 强大变换
- 利用矢量的力量以任何尺寸绘制清晰的图标
- 更容易创建仅包含您需要的图标的自定义子集
弱点
- 除非与我们的 JS 配合使用，否则不附带任何原生渲染
- 当在一个页面上使用许多图标时，可能会拖慢浏览器速度（但如果您使用的是重复图标，则可以使用 SVG 符号 解决此问题）
并排比较
| 功能/选项 | 网页字体和 CSS | SVG 和 JS |
|---|---|---|
| 图标如何渲染 | 作为 CSS 伪元素。 | 作为页面 HTML 中的 SVG 元素。 |
| 最适合 | 习惯使用 Font Awesome 旧版本的用户。在无法修改 HTML 标记并且必须使用 CSS 伪元素 (:before) 添加图标的项目中。 | 喜欢使用 SVG 显示图标的用户。希望使用强大变换等高级功能的用户。 |
| 升级难度（从 v4 开始） | 与 4.0 版类似的文件结构和框架。提供垫片以将 v4 图标名称映射到 v5 等效项。 | 需要不同的文件和引用。需要进行一些渲染校对。提供垫片。 |
| 要求 | CSS 和支持网页字体的浏览器（利用 @font-face）。 | CSS、JavaScript 和支持渲染 SVG 的浏览器。 |
| 图标大小 | 支持 | 支持 |
| 图标旋转 | 支持 | 支持 |
| 列表、带边框和拉伸的样式 | 支持 | 支持 |
| 图标动画 | 支持 | 支持 |
| 堆叠图标 | 支持 | 支持 |
| 自动无障碍性 | 不支持（除非使用工具包） | 支持 |
| 强大变换 | 不支持 | 支持 |
| 遮罩 | 不支持 | 支持 |
| 分层文本和计数器 | 不支持 | 支持 |