rails 应用程序在 heroku 上找不到 fontawesome 图标

Posted 2023-03-07

【中文标题】rails 应用程序在 heroku 上找不到 fontawesome 图标

【英文标题】：rails app not finding fontawesome icons on heroku

【发布时间】：2014-05-17 02:46:43

【问题描述】：

我安装了一个引导主题，一切都在本地运行良好。但是，当我去推送到 heroku 时，我的应用程序找不到字体。我预编译了资产并推送到heroku，但没有图标。

所以，我在 development.rb 中创建了类似 heroku 的开发环境：

  config.assets.debug = true

  # Disable Rails's static asset server (Apache or nginx will already do this).
  config.serve_static_assets = true

  # Compress javascripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # Generate digests for assets URLs.
  config.assets.digest = true

现在，我的开发环境找不到字体文件。字体文件位于两个位置：

app/assets/fonts/fontawesome-webfont.*
public/assets/fontawesome-webfont.*

但是，我得到了这个错误：

ActionController::RoutingError (No route matches [GET] "/assets/fontawesome-webfont.svg"):

这是从预编译的 css 文件 (application-xxxxxxxxx.css) 加载它们的方式：

@font-face 
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=4.0.3');
  src: url('fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;

我做错了什么？

【参考方案1】：

对我来说最简单的解决方法是使用Font Awesome "get started" page 中描述的 CDN。

删除样式表和字体文件的任何本地副本，并将其放在头部：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

（截至 2014 年 7 月 7 日，最新版本见上方链接）

【参考方案2】：

保持开发环境不变。我们只需要在生产模式下预编译资产。

这里，希望大家补充一下：

Application.rb

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#Rails.root/app/assets/fonts" 

并更新：

@font-face 
  font-family: 'FontAwesome';
  src: url('/assets/fontawesome-webfont.eot?v=4.0.3');
  src: url('/assets/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), 
  url('/assets/fontawesome-webfont.woff?v=4.0.3') format('woff'),
  url('/assets/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), 
  url('/assets/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;

然后运行rake assets:precompile 并将其推送到heroku。愿一切顺利。

【讨论】：

我添加了那行代码并再次预编译..似乎没有做任何事情。仍然出现同样的错误。

你确定我应该指向 app/assets 文件夹而不是 public/assets 文件夹吗？

嘿，application.rb 中的上述行用于将字体包含在资产路径中，以便在生产模式下将其用于预编译。当您在生产环境中预编译资产时，它们都将进入“public/assets”文件夹。您可以使用选项 config.assets.prefix 更改默认路径。

即便如此，如果没有正确服用，请参考anotheruiguy.roughdraft.io/…，也可以参考***.com/questions/10905905/…

【参考方案3】：

我尝试使用 assets-url 而不是 url 将适当的文件放入 assets/fonts 中并且它起作用了：

@font-face
  font-family: 'Font-Awesome';
  src: asset-url('font-awesome.eot');
  src: asset-url('font-awesome.eot?#iefix') format('embedded-opentype'),  
  asset-url('font-awesome.svg') format('svg'),  
  asset-url('font-awesome.woff') format('woff');
  font-weight: normal;
  font-style: normal;

【参考方案4】：

我只是清理了我的 public/assets 文件夹并再次预编译了资产。推到heroku，等等！它的工作就像一个魅力。有很多重复的文件，资产没有更新。因此不得不清理。当上述方法似乎都不适合我时，我尝试了这个。

注意：我在， 导轨 - 4.1.6 红宝石 - 2.1.3 font-awesome-rails - 4.2.0.0

希望它能帮助任何前来寻找正确解决方案的人！

【参考方案5】：

Rails 4.2 和 Font Awesome gem 'font-awesome-rails' 遇到了完全相同的问题。

我必须在你的@font-face 声明中使用asset-path（因为我使用的是sass，但我认为asset-url 也可以）。

确保您为生产环境而不是开发环境或其他环境进行编译：

RAILS_ENV=production bundle exec rake assets:precompile

以下是对我有帮助的资源：

http://anotheruiguy.roughdraft.io/7379570-custom-web-fonts-and-the-rails-asset-pipeline

https://github.com/concerto/concerto/issues/518（augustf 的评论）

【参考方案6】：

也许你需要添加。

config.assets.precompile += %w( .svg .eot .woff .ttf )

（来自http://www.jaynathan.org/2013/02/using-font-awesome-with-rails-asset-pipeline/）

【参考方案7】：

进行以下更改

@font-face
  font-family:'FontAwesome';
  src:font_url('font/fontawesome-webfont.eot?v=3.0.1');
  src:font_url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
  font_url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  font_url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal 

对我有用