Heroku上的Rails 4定位自举字形图标

Question

我有一个部署到Heroku的Web应用程序。 在应用程序中，我使用的是通过Bower安装的Bootstrap glyphicon。 我意识到这是一个普遍的问题，但是我所见过的任何解决方案都没有为我解决这个问题。

我修改了bootstrap.css.scss使其包含以下内容：

  @font-face {
    font-family: 'Glyphicons Halflings';
    src: url(asset_path('glyphicons-halflings-regular.eot'));
    src: url(asset_path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'), url(asset_path('glyphicons-halflings-regular.woff2')) format('woff2'),    url(asset_path('glyphicons-halflings-regular.woff')) format('woff'), url(asset_path('glyphicons-halflings-regular.ttf'))format('truetype'), url(asset_path('glyphicons-  halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
}

然后在我的application.rb中

config.assets.paths << Rails.root.join('vendor', 'assets',  bower_components', 'fonts')
config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.otf *.woff2)

在我的production.rb中，我有：

  config.serve_static_files = true
  config.assets.compress = true
  config.assets.compile = true
  config.assets.digest = true
  config.assets.precompile += %w( '.woff', '.eot', '.svg', '.ttf' )

当我在heroku上检查控制台时，出现以下错误并伴随着字形图标缺少字体：

GET http://hipster-meet.herokuapp.com/glyphicons-halflings-regular.woff2 
GET http://hipster-meet.herokuapp.com/glyphicons-halflings-regular.woff 
GET http://hipster-meet.herokuapp.com/glyphicons-halflings-regular.ttf 

在Heroku上搜索文件时，我发现：

glyphicons-halflings-regular-13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407.eot
glyphicons-halflings-regular-13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407.eot.gz
glyphicons-halflings-regular-42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5.svg
glyphicons-halflings-regular-42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5.svg.gz
glyphicons-halflings-regular-a26394f7ede100ca118eff2eda08596275a9839b959c226e15439557a5a80742.woff
glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf
glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf.gz

我将其解释为Bootstrap正在引用文件，但没有链轮添加的哈希。 无论如何，我有没有让Bootstrap指向正确的位置。

Answer 1

您可以尝试以下方法：使用font-url而不是url(asset_path

src:font-url("glyphicons-regular.eot");
and so on

Answer 2

我能够找到解决方法。 通过不预先编译字体并将字体复制到公用文件夹（因为无论如何这是引导程序正在寻找的内容）。 可能有一个更好的解决方案，但这似乎暂时可行。