XAMPP环境下项目引入Font Awesome CSS后图标无法正常显示

问题原因 #

1. 图标类名书写错误：你调用图标时使用的fas-camera-retro类名不符合Font Awesome 5+的命名规范，正确的图标名前缀是fa-而非fas-，错误的类名导致两个相机图标完全无法匹配到对应资源。
2. 字体资源路径不匹配：控制台抛出的fa-solid-900.woff 404报错是核心问题之一，Font Awesome的CSS文件默认会从CSS所在目录的上级webfonts目录加载字体文件，你当前将CSS放在vendors/css/路径下，但对应的字体文件夹没有放到对应位置，字体加载失败就会显示空白小方块。

解决步骤 #

• 修正图标类名：将所有错误的fas-开头的图标名改为fa-开头，fas-lg同理改为fa-lg，修正后的图标调用代码如下：

<td class="boldFont"><i class="fas fa-camera-retro fa-lg"></i>Region:</td>
<td id="region"></td>
</tr>
<tr>
<td class="boldFont"><i class="fas fa-camera-retro fa-lg"></i>Subregion:</td>
<td id="sub-region"></td>
</tr>                                 
<tr>
<td class="boldFont"><i class="fas fa-adjust"></i>Population:</td>
<td id="population"></td>
</tr>

• 调整资源目录结构：将Font Awesome资源包内的完整webfonts文件夹放到vendors/目录下，和css文件夹平级，最终目录结构如下：

vendors/
├── css/
│   ├── font-awesome.css
│   └── ...其他css文件
└── webfonts/
    ├── fa-solid-900.woff
    ├── fa-solid-900.woff2
    └── ...其他字体文件

• 保持CSS引入路径不变：无需添加多余的./前缀，原来的<link rel="stylesheet" href="vendors/css/font-awesome.css" />保留即可。
• 清除浏览器缓存后刷新页面验证效果。

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