font-awesome - Rails 5 + Rails Assets + Fontawesome 不加载字体

Question

通过rails-asset.org安装 Fontawesome并遵循默认说明，字体无法正确加载，我看到的只是框，表明生成的用于加载字体的 url 不正确。

Answer 1

更新：节省一些时间并切换宝石。以下是步骤。我发现即使我之前的回答在生产中也存在路径问题。然而，最容易让 fontawesome 使用：

1. gem 'font-awesome-rails'
2. @import "font-awesome";在你的 scss 文件中
3. 完毕！

无视下面的一切！除非你绝对想使用gem 'rails-assets-fontawesome'

所以看起来这是库中的一个错误，资产管道找不到路径。问题中建议的修复不再起作用，因为路径似乎已经改变，并且在 font-awesome 路径中不再有连字符。

这是正确的修复：

1. 创建一个app/assets/stylesheets/font-awesome.scss包含内容的新文件：

fa-font-path: "fontawesome/fonts";
@import "fontawesome";

2. 其中application.scss包括：

   *= 字体真棒

这应该可以解决问题，并且图标应该开始出现。

评论：

如果您选择在font-awesome.scss下移动某个目录app/assets/stylesheets/somedir/font-awesome.scss，则需要修复fa-font-path变量以具有正确的相对路径，如下所示：

fa-font-path: "../fontawesome/fonts";

小心路径和名称！

1. 您创建的文件不能被调用fontawesome.scss，因为这是打包的 gem 使用的名称。

2. 如果你有最新版本的 gem，rails-assets-fontawesome (4.7.0)那么 import 和 fa-font-path 将使用fontawesome，而不是 font-awesome像这个 gem 的旧版本那样。不确定这种行为在版本中有多远。

Answer 2

对于5.5.0版本，它应该如下所示：

$fa-font-path: 'fontawesome/web-fonts-with-css/webfonts';

@import "fontawesome";

// Copy-paste of these files:
// @import "fontawesome/solid";
// @import "fontawesome/regular";
// But url() replaced with font-url() 

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: font-url('#{$fa-font-path}/fa-regular-400.eot');
  src: font-url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  font-url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  font-url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  font-url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: font-url('#{$fa-font-path}/fa-solid-900.eot');
  src: font-url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  font-url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  font-url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  font-url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

Answer 3

不能在上面发表评论，但不应该是：

$fa-font-path: "fontawesome/fonts";

您可以在 gem 建议的导入上方：

@import "fontawesome";

Answer 4

如果字体 4.*...

从 fontawsome/fonts 复制用于 rails 公用文件夹的字体：public/fonts

Answer 5

在大约一天半的时间里学习了所有关于资产管道、它的缓存和其他有趣的主题之后，这就是我最终如何让它工作......

• 导轨 5.2.1
• Font Awesome 6 Pro（使用带有许可证密钥的 .npmrc 通过 npm 加载）
• 使用 SCSS
• 还使用 font-awesome-rails （但仅适用于助手 - 请注意@import "font-awesome";下面没有）

# config/initializers/assets.rb

# Adde node_modules/ to the asset pipeline
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'node_modules')

# Pre-compile any font files located in the asset pipeline
# This tells Rails to precompile the font files, fingerprint them, and place them in /public/assets/ (in the same subdir where they live in the pipeline)
# e.g. 
# node_modules/@fortawesome/fontawesome-pro/webfonts/fa-solid-900.ttf (pipeline path)
# public/assets/@fortawesome/fontawesome-pro/webfonts/fa-solid-900-229b67ef16372975f562838a5c9f9bd2d9d9905ccc9c77f34c45f3d1f18f016f.ttf (pre-compiled asset path)

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)$/

# application.scss

@import "@fortawesome/fontawesome-pro/scss/fontawesome.scss";
// Don't use provided font imports b/c we need to use font-url to get asset paths with fingerprints!
// $fa-font-path: "../webfonts"; // Don't use this
// @import "@fortawesome/fontawesome-pro/scss/regular.scss"; // Don't use this
@import "fonts"; // Use this instead so that we can use font-url

# fonts.scss 

/* Font Awesome 6 */

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-solid-900.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-solid-900.ttf") format("truetype"); }


@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-regular-400.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-regular-400.ttf") format("truetype"); }

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: normal;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-brands-400.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-brands-400.ttf") format("truetype"); }

此外，最困难的事情之一是意识到我的生产环境与我的开发环境不同，所以我只是在部署后才意识到这个问题:(这是避免这种情况的方法......

# config/environments/development.rb

# Don't use pipeline if asset path fails 
# config.assets.compile defaults to true in dev...so if the pre-compiled asset doesn't exist in public/assets/..., it will just pull from the pipeline and you won't know that you have an issue until you deploy!
config.assets.compile = false # This will raise an exception if the pre-compiled asset not found!
config.assets.debug = false # Pre-compile assets into single file
config.assets.digest = true # Use fingerprinting

现在，当然，这意味着您需要在开发中预编译资产，因此您需要bundle exec rake assets:precompile从项目的根目录运行。这将预编译您的资产并将它们放在 /public/assets/

如果您遇到预编译器实际上并未重新编译资源的缓存问题，您可以通过运行删除 Sprockets 缓存rm -r tmp/cache/assets

成功将资产更改迁移到生产环境后，我建议将 development.rb 恢复为默认值以进行高效开发。此外，您可能想要bundle exec rake assets:clobber删除预编译的资产。

这是我在事后发现的其他一些好信息...... https://guides.rubyonrails.org/asset_pipeline.html#in-development

希望这可以帮助某人节省几个小时的“兔子洞”:)

Answer 6

我已经将这些行添加到config/initializers/assets.rb：

Rails.application.config.assets.paths << Rails.root.join('node_modules')

# font-awesome fonts
Rails.application.config.assets.precompile << %r{font-awesome/fonts/[\w-]+\.(?:eot|svg|ttf|woff2?)$}

并在其他答案中提到这一点：

应用程序.scss

$fa-font-path: "fontawesome/fonts";
@import "fontawesome";

运行rake assets:precompile，你应该看到字体文件public/assets/font-awesome/fonts