css - Rails 4 在 Heroku 上定位 Bootstrap 字形图标

Question

我有一个部署到 Heroku 的网络应用程序。在应用程序中，我正在使用使用 Bower 安装的 Bootstrap 字形图标。我意识到这是一个常见问题，但我所看到的解决方案都没有解决这个问题。

我修改了我的 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