使用Bootstrap CDN时Font Awesome垃圾桶图标显示为Unicode的原因排查

问题描述 #

使用Bootstrap CDN引入Font Awesome图标时，垃圾桶图标显示为Unicode字符，但感叹号图标可正常显示。

可能的原因 #

• 图标类名不匹配：Font Awesome不同版本的图标类名存在差异，比如旧版本垃圾桶图标用fa-trash，新版本（v5+）需要指定样式前缀+图标名，比如fa-solid fa-trash-can。如果误用了当前版本不存在的类名，就会显示Unicode占位符；而感叹号图标类名（如fa-exclamation-circle）跨版本兼容性较好，所以能正常显示。
• 版本兼容性问题：你引入的Bootstrap CDN中Font Awesome版本过低，不支持你使用的垃圾桶图标类名。比如v4版本没有fa-trash-can，只有fa-trash，强行使用新类名就会出现异常。
• 字体资源加载失败：垃圾桶图标对应的字体子集请求失败（比如网络波动、CDN节点故障），浏览器无法加载对应字体，只能显示Unicode替代字符；而感叹号对应的字体子集加载正常，所以不受影响。
• 样式被覆盖：自定义CSS或其他第三方样式修改了图标元素的font-family属性，导致垃圾桶图标无法应用Font Awesome字体，而感叹号图标所在元素未被该样式影响。

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