求助：使用Font Awesome CDN链接后图标无法正常显示

问题原因 #

你当前使用的CDN仅引入了Font Awesome的核心基础样式，缺少具体图标（如实心样式）的定义；同时Font Awesome 6对免费实心图标的类名规则做了调整，仅用fa类无法正确加载图标。

修复步骤 #

1. 替换CDN链接
   将原有的CSS链接替换为包含所有免费图标样式的版本：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css">
   

   这个链接包含了Font Awesome免费版的所有图标样式（实心、常规等），确保图标资源能被正确加载。

2. 修正图标类名
   Font Awesome 6中，免费实心图标需要添加fa-solid（或简写fas）类，修改后的图标代码如下：

   • 叉号图标：

     <i class="fa-solid fa-times"></i>
     

     （或简写：<i class="fas fa-times"></i>）
   • 菜单按钮图标：

     <i class="fa-solid fa-bars"></i>
     

     （或简写：<i class="fas fa-bars"></i>）

验证方法 #

替换完成后刷新页面，图标应该能正常显示为叉号和菜单按钮。如果仍有问题，检查浏览器控制台是否有资源加载错误，确认CDN链接可正常访问。

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