Question

通过rails-asset.org安装Fontawesome，并按照默认说明操作，字体无法正确加载，我看到的只是方框，表示生成的加载字体的网址不正确。

Answer 1

更新：节省一些时间并切换宝石。这是步骤。我发现，即使我之前的回答，生产中也存在路径问题。然而，最简单的方法是与fontawesome合作：

gem 'font-awesome-rails'
@import "font-awesome";
完成！

忽略这下面的一切！除非你绝对想要使用gem 'rails-assets-fontawesome'

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

这是正确的解决方法：

使用内容

app/assets/stylesheets/font-awesome.scss

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

在application.scss包含：

* = font-awesome

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

备注：

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

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

小心路径和名称！

您创建的文件无法被称为fontawesome.scss，因为这是打包的gem使用的名称。
如果你有宝石rails-assets-fontawesome (4.7.0)的最新版本，那么import和fa-font-path将使用fontawesome和不 font-awesome作为在这个宝石的旧版本中。不知道这种行为在版本中有多远。

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

Answer 5

如果fontawsome 4。* ...

从fontawsome / fonts中为Rails公用文件夹复制字体：public / fonts

Rails 5 + Rails Assets + Fontawesome不加载字体

5 个答案: