Question

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

所以，我在developer.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;
}

我做错了什么？

Answer 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日的最新消息，请参阅上面的链接以获取最新版本）

Answer 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。愿这一切顺利。

Answer 3

我尝试使用asset-url而不是url将适当的文件放在资源/字体中并且它有效：

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

Answer 4

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

注意：我在， Rails - 4.1.6 Ruby - 2.1.3 font-awesome-rails - 4.2.0.0

希望它可以帮助任何寻找正确解决方案的人！

Answer 5

我在Rails 4.2和Font Awesome gem＆＃39; font-awesome-rails＆＃39;中遇到了完全相同的问题。

我必须在@ font-face声明中使用资产路径（因为我使用sass，但我认为资产网址也有效）。

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

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（奥古斯特的评论）

Answer 6

也许您需要添加。

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

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

Answer 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

}

它对我有用

rails app没有在heroku上找到fontawesome图标

7 个答案: