Rails 5 + Rails Assets + Fontawesome无法加载字体。

Question

Rails 5 + Rails Assets + Fontawesome无法加载字体。

font-awesomeruby-on-rails-5rails-assets

5

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

- Shaunak

6个回答

1

我已经通过添加以下行到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中。

- Max Ivak

同时检查URL字体：@font-face { src: url('#{$fa-font-path}/fontawesome-webfont.eot..'); ... }。将url(..)更改为font-url(..)。 - Max Ivak

1

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

- Astery

0

如果使用 fontawesome 4.*...

将字体从 fontawesome/fonts 复制到 Rails 的公共文件夹 public/fonts 中。

- Lucas Vital

0

经过大约一天半的学习有关资产管道、缓存和其他有趣的主题，我终于找到了解决方法...

Rails 5.2.1
Font Awesome 6 Pro（通过使用带有许可证密钥的 .npmrc 加载）
使用 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/ 中。

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

一旦您成功地将资产更改迁移到生产环境中，我建议将 development.rb 恢复为高效开发的默认设置。此外，您可能希望bundle exec rake assets:clobber来删除预编译的资产。

以下是我事后发现的其他有用信息... https://guides.rubyonrails.org/asset_pipeline.html#in-development

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

- Hollie B.

0

无法在上面进行评论，但它不应该是：

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

您可以在宝石的建议导入之上正确地编写：

@import "fontawesome";

- purelyatom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shaunak · Accepted Answer

UPDATE：节省时间并切换宝石。以下是步骤。我发现即使在以前的答案中，生产中也存在路径问题。但是，使用以下方法最容易让fontawesome正常工作：

1. 在Gemfile中添加gem 'font-awesome-rails' 2. 在您的scss文件中添加@import "font-awesome"; 3. 完成！

除非您绝对想使用gem 'rails-assets-fontawesome'，否则请忽略下面的所有内容！

所以看起来这是库中的一个bug，资产管道找不到路径。问题中建议的修复方法不再有效，因为自那时以来路径似乎已经改变，并且font-awesome路径中不再有连字符。

以下是正确的修复方法：

1. 创建一个名为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 使用的名称。
如果您拥有最新版本的 gem rails-assets-fontawesome (4.7.0)，则导入和 fa-font-path 将使用 fontawesome 而不是旧版本的 font-awesome。不确定此行为追溯到哪个版本。