Rails 7.0中Bootstrap Icons使用问题：图标显示异常及ActionController::RoutingError求助

你遇到的问题核心是Bootstrap Icons的字体文件路径没被正确处理，导致浏览器找不到字体资源，既显示不出图标还触发了路由错误。我给你两个实用的解决办法：

办法一：手动复制字体文件（简单直接） #

Bootstrap Icons的字体文件存放在node_modules/bootstrap-icons/font/目录下，你只需要把里面的bootstrap-icons.woff2和bootstrap-icons.woff这两个文件，复制到Rails项目的public/fonts/目录里（如果fonts文件夹不存在就新建一个）。这样浏览器请求/fonts/路径下的字体文件时，就能直接找到对应的资源了。

办法二：修改CSS变量，规范处理路径（更符合Rails资源管理逻辑） #

在你的app/assets/stylesheets/application.bootstrap.scss文件里，先设置Bootstrap Icons的字体路径变量，再引入图标样式，这样编译后的CSS会自动指向正确的资源位置：

@import 'bootstrap/scss/bootstrap';
// 提前设置字体路径变量，指向node_modules中的图标字体目录
$bootstrap-icons-font-path: "bootstrap-icons/font/";
@import 'bootstrap-icons/font/bootstrap-icons';
@import 'custom';

完成上面的操作后，记得重启bin/dev让资源重新编译，再刷新页面就能看到正常显示的图标了，路由错误也会消失。

补充说明：Rails 7用cssbundling-rails处理CSS资源，它会把npm包中的资源编译后放到public/assets目录下，通过设置变量的方式能让路径自动适配Rails的资源管理规则，比手动复制更适合长期维护。

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