logo标签列表

Rails应用在Heroku上找不到Fontawesome图标

cssruby-on-railstwitter-bootstrapheroku
6

我安装了一个Bootstrap主题，本地一切正常。但是，当我尝试将应用程序推送到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;
}

我做错了什么？
7个回答
12

对我来说最简单的解决方法是使用在Font Awesome“入门”页面上描述的CDN。

删除任何本地样式表和字体文件，只需将此代码放在标签中：

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

(截至于2014年07月07日，查看上面的链接获取最新版本)

3
保持开发环境不变。我们只需要在生产模式下预编译资产。
在这里，我希望您需要添加： 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。也许这样会顺利进行。

我添加了那行代码并重新编译了一遍，但好像没有任何变化。仍然出现相同的错误。 - Matthew Berman
你确定我应该指向app/assets文件夹而不是public/assets文件夹吗？ - Matthew Berman
嘿，application.rb中的上述行是用于将字体包含到资产路径中，以便在生产模式下进行预编译。当您在生产环境中预编译资产时，所有资产都将进入“public/assets”文件夹。您可以使用选项config.assets.prefix更改默认路径。 - Rajesh Omanakuttan
即使如此，如果它没有正确地进行，请参考http://anotheruiguy.roughdraft.io/7379570-custom-web-fonts-and-the-rails-asset-pipeline，还有https://dev59.com/zmgv5IYBdhLWcg3wBMOg?answertab=active#tab-top。 - Rajesh Omanakuttan
2
我只是清理了我的public/assets文件夹并重新编译了资产。推送到Heroku，然后就像魔术一样运行了。有很多重复的文件而且资产没有更新，因此需要清理。当以上方法都不起作用时，我尝试了这个方法。
注意：我的环境是： Rails - 4.1.6 Ruby - 2.1.3 font-awesome-rails - 4.2.0.0
希望这对任何需要正确修复问题的人有所帮助！
2

我在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的评论）

2

我尝试使用asset-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;
}
0
0

进行以下更改

@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

}

这对我有效

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接