也许：

gem "font-awesome-rails", "~> 4.7"
# or
gem "font_awesome5_rails", "~> 1.5"

用 gem 的方法更简单。

不过，感觉没必要，引入整个 css，这么大的文件，就为了几个 icon?，还不如直接用 helper 吧。

把这个 https://github.com/FortAwesome/Font-Awesome 用 helper 包装一下吧。

类似这个：

<%= fa6_icon("brands-alipay") %>
<%= fa6_icon("regular-bell") %>
<%= fa6_icon("solid-anchor") %>
<%= fa6_icon("brands-alipay", title: "font awesome icon") %>
<%= fa6_icon("brands-alipay", title: "font awesome icon", size: 30) %>
<%= fa6_icon("brands-alipay", title: "font awesome icon", class: "text-grey-500") %>
<%= fa6_icon("brands-alipay", class: "text-red-500", aria: { label: "user-icon" }) %>

Gem 的方式我试过。仍然没有正常输出我想要的。 而且，通过 Gemfile 的方式，我没法在 application.scss 里 import，

 Error: Can't find stylesheet to import.
12:41:58 css.1  |   ╷
12:41:58 css.1  | 4 │ @import "font-awesome";
12:41:58 css.1  |   │         ^^^^^^^^^^^^^^
12:41:58 css.1  |   ╵
12:41:58 css.1  |   app/assets/stylesheets/application.scss 4:9  root stylesheet

helper 方法的输出内容是没问题的。

感觉你还不太懂 assets pipeline 的，你用了 sass 静态文件的方式肯定用不了呀，

你去 layout 里：

<%= stylesheet_link_tag "admin", "data-turbo-track": "reload" %>

然后再创建个 admin.css

在里面去 import

我的 application.scss 里是引入了 @import 'bootstrap/scss/bootstrap'; @import 'bootstrap-icons/font/bootstrap-icons'; 这两个，bootstrap 样式和 icons 都能正常使用。

而且我按你说的试了下，还是不行。我加了个 custom.css，并且在 manifest.js 里也引入了

/= link custom.css

build 的时候也没有任何报错，但就是没有显示对应的 icon。

我看了下 builds 里的 css，像 fa-flip 这种 class 的样式，它都是编译好进去了的。但就是没生效，也没任何报错呢？

我是新起的项目，带的参数是 css=bootstrap

layout 里要处理，引入 custom.css

<%= stylesheet_link_tag "custom", "data-turbo-track": "reload" %>

我用了 2 种方式尝试

1. yarn add @fortawesome/fontawesome-free

2. Gemfile 里添加 gem "font-awesome-rails"

3. 如我上面所说，添加后，Rails 也将 node_modules 里的内容 build 好放到了 builds 里的 application.css 里，能够搜到相关的 css。但样式在页面上始终不生效。我用同样的方式添加了 bootstrap 和 bootstrap-icon，css 和 icon 都是生效的。

4. 用 Gem 的方式通过静态文件引入。layouts 里 <%= stylesheet_link_tag "custom", "data-turbo-track": "reload" %>

manifest.js 里 //= link_tree ../builds //= link custom.css

custom.css 里 @import "font-awesome";

1 和 2 尝试，都没有报错，文件都正常 build。

其中 2 里面，网页代码里里我也看到了有 且 source 里的 assets 也有 4 项

application.js application.css custom.css fontawesome

其中 fontawesome 里有内容 /*!

• Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
• License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) / / FONT PATH

但就是没有看到对应的字体样式。。。

用这个 https://github.com/tomkra/font_awesome5_rails/blob/master/app/helpers/font_awesome5/rails/icon_helper.rb#L10 svg helper 的方法，不用引入任何 js css

谢谢，确实这样可以解决这个问题。只是我有点不明白我 1 和 2 的做法不成功的原因到底是啥，字体没有引入么。。。我只想的到这一个原因了

编辑：行不通，看 18 楼。

因为 sass 不处理引用的资源（字体或者图片），这还需要 assets pipeline 处理。

如果 assets pipeline 用的是 sprocket，那么可以在 manifest.js 里面添加设置：

//= link_tree ../../../node_modules/@fortawesome/fontawesome-free/webfonts

注意这个路径是否匹配你的安装路径。设置这个后，sprocket 会把这个 webfonts 目录下的资源加入 pipeline，并且替换 css 里面用 url() 引用的资源地址（加上 digest）。

如果还有问题可以参考这个 issue https://github.com/rails/cssbundling-rails/issues/22#issuecomment-1030735501 。

编辑：行不通，看 18 楼。

我看了下 fontawesome 的源码，也许要加上 fa-font-path 变量，从 scss 编译。

因为 fa-font-path 默认是相对路径 '../webfonts'，上面的 link_tree 已经进入了 webfonts 这个目录。

$fa-font-path: '';

// You probably already include the core styles
@import "./fontawesome/scss/fontawesome.scss";

// For Duotones you need both of these files
@import "./fontawesome/scss/duotone.scss";
@import "./fontawesome/scss/_duotone-icons.scss";

// You can include all the other styles the same as before
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/brands.scss";

1 和 2 的方法，如果你要用 rails 的方式 assets pipeline 的话，把 Rails.application.config.assets.paths << Rails.root.join("node_modules") 添加到 config/initializers/assets.rb 里，然后去 import 那些静态文件

最终还是建议别引入字体文件了，太鸡儿大了，就为了用几个 icon。。

yarn add 后，在 application.js 里引入 import "@fortawesome/fontawesome-free/css/all" 就可以了。

验证过的方法：

在 config/initializers/assets.rb 加入：

Rails.application.config.assets.paths << Rails.root.join('node_modules/@fortawesome/fontawesome-free/webfonts')

在 application.sass.scss 加入：

$fa-font-path: ".";

@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";

其他不用改，包括 manifest.json。

恩，我就是加到 assets 里就可以了。只是我觉得那些 gem，或者是用 svg 也可以。

确实这样就可以了。

写了一篇日志记录解决的原理 https://geeknote.net/Rei/posts/1222