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'

所以看起来这是库中的bug，资产管道找不到路径。问题中建议的修复程序不再起作用，因为路径似乎已经发生变化，并且字体 - awesome路径中不再有连字符。

这是正确的修复：

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

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

2. 在application.scss包括： * = font-awesome

这应该解决问题，图标应该开始显示。

备注：

如果你选择在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

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

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

你可以在gem的建议导入之上：

@import "fontawesome";

Answer 3

我有它将这些行添加到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?)$}

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

application.scss

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

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

Answer 4

对于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;
}