Font Awesome 4与5的差异及两类图标代码区别咨询

• 图标分类体系不同：Font Awesome 4只有一个通用前缀fa，所有图标共用这个标识；Font Awesome 5拆分出多个样式家族前缀，比如fas（实心样式）、far（空心样式）、fab（品牌图标），能更精准区分图标样式类型。
• 图标量级扩容：Font Awesome 5新增了大量品牌图标、行业专属图标，整体数量比Font Awesome 4翻了好几倍，覆盖场景更全面。
• 加载与渲染方式优化：Font Awesome 5除了保留传统的字体加载方式，还支持SVG+JS加载模式，这种方式可以让图标渲染更清晰、支持更多自定义动画，同时性能表现更优。
• 自定义能力升级：Font Awesome 5支持通过CSS变量、JS API直接修改图标的颜色、大小、旋转等属性，自定义自由度远高于Font Awesome 4的基础CSS调整。
• 兼容性侧重不同：Font Awesome 4对老旧浏览器（如IE8）的支持更完善；Font Awesome 5则优先适配现代浏览器，虽然也提供兼容方案，但对极老版本浏览器的支持力度有所降低。

• 代码1：<i class="fas fa-user" aria-hidden="true"></i>是Font Awesome 5的标准写法，fas是Solid样式家族的前缀，对应实心的用户图标，这是5版本引入的分类式前缀写法，能明确指定图标样式。
• 代码2：<i class="fa fa-user" aria-hidden="true"></i>是Font Awesome 4的写法，在5版本中如果沿用这个写法，会默认映射到Solid样式的图标，但官方不推荐这么用，因为无法明确区分不同样式家族的图标，不利于维护和扩展。

内容的提问来源于stack exchange，提问作者Mohammadreza