Bootstrap 3图标在Rails生产服务器上无法显示

Question

我无法在我的正式服务器上加载在本地服务器上完美运行的 Bootstrap 3 Glyphicons 字体。

我已经尝试了 Stack Overflow 上的各种方法，但仍然无法解决问题。

以下是我的操作步骤：

applicatin.css.scss

@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

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

我目前尝试过的方法：

@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

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

并且

@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

并且

@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

并且

@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

并且

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";

但是所有这些方法对我都没有用，但它们在本地服务器上运行良好。

- user5084534

---

当您指定 http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css 后，是否预编译了资产？ - Amit Badheka

不，我没有在实时服务器上预编译它们。如果我这样做，我的服务器会受到影响吗？这是我的现场网站。 - user5084534

在生产服务器上不应该有任何问题，先通过 RAILS_ENV=production rake assets precompile 在本地编译资源，然后在演示环境上更新和检查。最后将代码更新到生产环境。 - Amit Badheka

我不确定为什么你要手动添加所有这些不必要的 @import 语句。你似乎是从 CDN 加载 Bootstrap，既然如此，你只需要在 application.scss 中使用 stylesheet_link_tag，并运行 rake assets:precompile RAILS_ENV=production，就可以了。可能有一个类似的问题：http://stackoverflow.com/questions/30239842/rails-4-using-cdn-in-production - moeabdol

Answer 1

这是资产管道影响到您的方式...

请按照以下步骤修复它:

1. 将字体文件glyphicons-halflings-regular.*复制到文件夹you-app-path/vendor/assets/fonts
2. 将文件boostrap.css复制到文件夹you-app-path/vendor/assets/stylesheets
3. 将复制的文件boostrap.css重命名为boostrap.css.erb

4. 编辑文件boostrap.css.erb，根据以下方式调整@font-face变量:

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

5. 在文件you-app-path/config/initializers/assets.rb中添加/调整以下行:

Rails.application.config.assets.precompile += %w(*.svg *.eot *.woff *.woff2 *.ttf)

6. 将以下行添加到文件your-app-path/app/assets/stylesheets/application.css.scss中：

*= require bootstrap

最后，重新启动你的Rails应用程序，所有东西都应该正常工作。

- The Fabio

Answer 2

您可以将所有字体放置在文件夹#{Rails.root}/public/fonts中，并根据以下内容更改您的代码。

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

- Amit Badheka

---

我该如何拥有实体字体文件夹？我需要从哪里下载它们？你可以看到这是Bootstrap的一部分，所有这些都驻留在其中。 - user5084534

你可以在 http://getbootstrap.com/getting-started/ 获取所有的 Bootstrap 字体。将字体文件夹放置在 Rails 项目的公共文件夹中，并相应地更改字体路径。 - Amit Badheka

Answer 3

我曾经遇到过同样的症状，是由于我的CDN出现了CORS问题所致。当我最终打开浏览器的JavaScript控制台时，这一点变得很明显。

- webdevguy

Answer 4

做这些更改

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

如果再次加载不了其他的Glyphicons，那么请更改其路径../fonts/，问题就会得到解决。

- Gaurav Mamidwar

---

它说："网络错误：404未找到 - http://lvh.me:3000/fonts/glyphicons-halflings-regular.woff" 和 "网络错误：404未找到 - http://lvh.me:3000/fonts/glyphicons-halflings-regular.ttf" - user5084534

它在本地上运行正常：@font-face { font-family: 'Glyphicons Halflings'; src: url('/assets/bootstrap/glyphicons-halflings-regular.eot'); src: url('/assets/bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/bootstrap/glyphicons-halflings-regular.woff') format('woff'), url('/assets/bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }那么在生产环境中会工作良好吗？这是我的问题。 - user5084534

你把字体文件夹放在哪个目录里了？ - user5084534

非常感谢。如何获取“fonts”文件夹？我知道它来自于Bootstrap，但链接是什么？ - user5084534

在config/application.rb文件中添加以下代码： config.assets.paths << Rails.root.join("app", "assets", "fonts") - Gaurav Mamidwar