通过CDN引入Font Awesome图标无法正常显示的问题排查

嘿，我一眼就揪出问题所在啦——你用的Font Awesome版本和图标类前缀不匹配！

你引入的是Font Awesome 4.7.0的CDN，但写的图标类是fas fa-camera，这个fas是Font Awesome 5及以上版本才有的「Solid」样式前缀，4.x版本里根本没有这个类，所以浏览器找不到对应的图标，只能显示那个带Unicode（F030）的占位框。

给你两个快速解决的方案：

方案1：适配4.7.0版本的类名 #

把图标标签里的fas改成fa就行，4.x版本的所有图标都用fa前缀：

<i class="fa fa-camera"></i>

保持你现有的CDN链接不变，这样就能正常显示相机图标了。

方案2：升级到Font Awesome 5+版本 #

如果你想继续用fas这类细分前缀（比如far是常规样式、fab是品牌图标），可以把CDN换成5.x及以上版本的链接，比如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

这样你的fas fa-camera标签就能正常工作了。

另外可以顺手检查下浏览器控制台有没有资源加载报错（比如CDN链接无法访问），不过从你能看到占位框来看，字体文件应该是加载成功了，核心问题还是前缀不匹配～

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