Rails 7（jsbundling）添加Font Awesome图标不显示求助

核心排查与修复步骤 #

• 确认图标版本兼容性：fa-sharp fa-solid fa-house是Font Awesome Pro专属图标，免费版无此样式，先换成免费版类名fa-solid fa-house（去掉fa-sharp）测试。
• 确保CSS文件被esbuild正确引入：
  1. 打开app/javascript/application.js，确认已导入你的SCSS文件：

     import "../stylesheets/application.css.scss"
     import "../stylesheets/application.bootstrap.scss"
     

  2. 若用yarn安装（esbuild环境推荐此方式）：
     • 执行安装命令：yarn add @fortawesome/fontawesome-free
     • 在application.css.scss中导入官方CSS：

       @import "@fortawesome/fontawesome-free/css/all.css";
       

     或直接在application.js中导入：

     import "@fortawesome/fontawesome-free/css/all.css"
     

处理esbuild字体文件加载问题 #

esbuild默认不处理字体资源，需配置插件复制字体文件到public目录：

1. 安装资源复制插件：yarn add esbuild-copy-plugin --dev
2. 修改config/esbuild.config.js添加配置：

   const copyPlugin = require('esbuild-copy-plugin');
   
   module.exports = {
     plugins: [
       copyPlugin({
         assets: {
           from: ['./node_modules/@fortawesome/fontawesome-free/webfonts/*'],
           to: ['./public/webfonts/'],
         },
       }),
     ],
   };
   

3. 重启bin/dev服务，确认public/webfonts目录下已生成字体文件。

gem安装方式的注意事项 #

若坚持用font-awesome-sass gem，需调整导入顺序：

@import "font-awesome-sprockets";
@import "font-awesome";

但由于esbuild不兼容Sprockets资源加载逻辑，此方式容易出现路径问题，优先推荐yarn安装。

检查icon helper使用 #

若使用icon helper，需确认是否安装了font-awesome-rails gem，但esbuild环境下更建议直接用HTML标签写法，避免helper带来的路径异常：

<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-font-awesome"></i>

最终验证 #

• 打开浏览器开发者工具，检查图标元素的font-family是否为"Font Awesome 6 Free"类样式。
• 在Network面板确认字体文件（如fa-solid-900.woff2）无404加载错误。

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