FontAwesome 5与Sass集成故障：图标无法显示求助

我之前也碰到过一模一样的情况，按官方入门步骤走了但图标就是死活不出来，折腾了好一会儿才捋清楚问题，给你几个排查方向：

• 先确认字体文件路径是否匹配
  FontAwesome的SCSS依赖字体文件（woff2、woff这些）加载，默认的路径可能和你的目录结构不匹配。你可以打开fontawesome.scss看看开头的$fa-font-path变量，或者直接在你的home.scss里手动指定路径——重点是，这个路径是相对于编译后CSS文件的位置，不是SCSS源文件的位置！比如你的CSS编译到public/css，而字体文件在public/scss/vendors/font-awesome/webfonts，那路径应该这么写：

  $fa-font-path: "../scss/vendors/font-awesome/webfonts";
  @import "vendors/font-awesome/fontawesome.scss";
  // 别忘了导入你要用的图标类型样式
  @import "vendors/font-awesome/solid.scss";
  @import "vendors/font-awesome/brands.scss";
  

• 别漏了导入具体的图标样式文件
  官方的fontawesome.scss只是个基础框架，不包含具体的图标样式（比如实心、品牌图标这些）。如果你只用了fontawesome.scss，编译后的CSS里只会有基础类，但没有图标对应的字体引用，自然显示不出来。按需导入你需要的图标类型SCSS文件就行。

• 用浏览器控制台排查网络请求
  按F12打开开发者工具，切到Network标签，刷新页面看看有没有404的请求——尤其是字体文件。如果有，说明路径错了，调整$fa-font-path直到字体文件能正常加载。

• 检查编译后的CSS和图标类名
  看看编译后的CSS里有没有类似这样的规则：

  .fa-solid {
    font-family: "Font Awesome 5 Solid";
    font-weight: 900;
  }
  

  如果没有，说明你没正确导入图标样式；如果有，再检查HTML里的图标类名是不是FontAwesome 5的格式，比如实心图标要加fa-solid前缀，别写成旧版本的fa了。

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