如何在HTML中添加Font Awesome图标？引入CDN后图标不显示如何解决？

• 核对CDN版本与类名语法匹配度
  你当前使用的fa前缀是Font Awesome 4.x的专属语法，如果你引入的是5.x/6.x版本的CDN，类名规则会有变化：

  • 普通实心图标使用fas前缀
  • 社交类品牌图标统一使用fab前缀
    比如你的社交图标要对应修改为fab fa-facebook-square、fab fa-twitter-square、fab fa-linkedin-square。如果你需要继续使用4.x的fa语法，请确认你引入的CDN是4.x版本的官方CSS文件。

• 补全图标容器的基础样式
  你当前的<a>标签为空且未设置尺寸、字体大小属性，就算图标资源加载正常也会因为没有渲染载体无法显示，可以添加如下CSS规则：

#social-icons a {
  display: inline-block;
  font-size: 20px; /* 可自行调整大小 */
  margin: 0 6px;
}

• 检查CDN资源加载状态
  打开浏览器开发者工具的「网络」面板，筛选CSS资源，确认Font Awesome的CSS文件加载状态为200，没有出现加载失败、跨域拦截等异常。

• 排查样式覆盖冲突
  检查全局CSS中是否有针对<a>标签设置了高优先级的font-family属性，Font Awesome图标依赖专属的字体族渲染，如果被其他字体规则覆盖，会显示为空白或方块，可以给图标类添加强制字体规则：

.fa, .fab, .fas {
  font-family: "Font Awesome 5 Free", "FontAwesome" !important;
}

适配4.x版本CDN的修改参考代码 #

<div id="footer">
<div class="container">
    <div class="row">
      <div class="col-md-6">copyright@2021 company name</div>
      <div class="col-md-6">
        <ul id="social-icons" class="float-md-right">
         <li><a href="" class="fa fa-facebook-square"></a></li>
      <li><a href="" class="fa fa-twitter-square"></a></li>
      <li><a href="" class="fa fa-linkedin-square"></a></li>
    </ul>
    </div>
  </div>
 </div>
</div>
<style>
#social-icons li {
  display: inline-block;
  list-style: none;
}
#social-icons a {
  font-size: 22px;
  color: #333;
  margin: 0 8px;
}
</style>

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