Rails 有段时间没写 Rails，看着 7 出了，自己试了试，引入 Font-awesome 遇到点问题。
有段时间没写 Rails，看着 7 都出了，自己试了试，遇到点问题。
{
"name": "app",
"private": "true",
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"@hotwired/stimulus": "^3.0.1",
"@hotwired/turbo-rails": "^7.1.3",
"@popperjs/core": "^2.11.5",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.3",
"esbuild": "^0.14.42",
"sass": "^1.52.1",
"sortable": "^2.0.0"
},
"scripts": {
"build:css": "sass app/assets/stylesheets/application.scss app/assets/builds/application.css --no-source-map --load-path=node_modules",
"build": "esbuild app/javascript/application.js --bundle --outdir=app/assets/builds"
}
}
application.scss 里 @import '@fortawesome/fontawesome-free/css/all';
在 builds 里也确确实实看到样式被编译进去，但 Web 上并不生效。用 CDN 的话就没问题。应该是我字体没引入的原因吧？应该把字体引入进去呢？
也许：
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
xianyuit
回复
我的 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
wdrsam
回复
layout 里要处理，引入 custom.css
<%= stylesheet_link_tag "custom", "data-turbo-track": "reload" %>
xianyuit
回复
我用了 2 种方式尝试
- yarn add @fortawesome/fontawesome-free
Gemfile 里添加 gem "font-awesome-rails"
如我上面所说，添加后，Rails 也将 node_modules 里的内容 build 好放到了 builds 里的 application.css 里，能够搜到相关的 css。但样式在页面上始终不生效。我用同样的方式添加了 bootstrap 和 bootstrap-icon，css 和 icon 都是生效的。
用 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
但就是没有看到对应的字体样式。。。
wdrsam
回复
用这个 https://github.com/tomkra/font_awesome5_rails/blob/master/app/helpers/font_awesome5/rails/icon_helper.rb#L10 svg helper 的方法，不用引入任何 js css
xianyuit
回复
谢谢，确实这样可以解决这个问题。只是我有点不明白我 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 。
Rei
回复
编辑：行不通，看 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 那些静态文件
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。
