React项目引入Font Awesome图标后无法显示该如何排查解决？

• CDN资源加载异常排查 #

  打开浏览器F12调试工具，切换到「网络」面板，筛选CSS资源，检查Font Awesome的CDN链接是否加载成功，是否存在404、跨域校验失败等问题。如果加载失败，可先尝试替换为其他稳定CDN源，同时确认integrity属性的哈希值和对应资源匹配，也可暂时移除integrity属性测试是否是哈希校验不通过导致的加载失败。

• 样式冲突排查 #

  切换到调试工具的「元素」面板，选中<i>标签，检查fas、fa-shopping-cart等类是否被成功识别，是否存在其他样式覆盖了图标相关属性的情况，比如font-family被改写、content属性被覆盖。如果存在冲突，可添加高权重的全局样式兜底，示例如下：

  .fas {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
  }
  

• React项目配置排查 #

  确认项目是否开启了CSS Modules全局类名哈希编译，如果开启，需要将图标相关的全局类名放到:global()包裹的作用域中，或者将图标样式单独放到全局CSS文件中引入，避免类名被转译后无法匹配CDN提供的样式规则。

• 推荐适配React的引入方式 #

  若CDN引入方式持续出现问题，可替换为官方提供的React组件包，规避样式冲突和加载问题：
  1. 安装依赖

  npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core
  

  2. 组件内引入使用

  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import { faShoppingCart, faUser } from '@fortawesome/free-solid-svg-icons'
  
  // 业务代码中替换原有i标签
  <Nav className="mr-auto">
    <Nav.Link href="/cart"><FontAwesomeIcon icon={faShoppingCart} /> Cart</Nav.Link>
    <Nav.Link href="/login"><FontAwesomeIcon icon={faUser} /> Login</Nav.Link>
  </Nav>
  

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