Bootstrap 3 个 Glyphicons 未在 rails 生产服务器上显示

Question

我无法在我的实时服务器上加载 Bootstrap 3 Glyphicons 字体，这些字体在我的本地服务器上运行良好，但在实时服务器上却不行。

我已经尝试了从 SO 到所有的一切，但它仍然对我不起作用。

这是我正在做的事情：

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";

但所有这些都不适合我，但它们在本地服务器上没问题。

Answer 1

做这些改变

@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/ 它将得到解决

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

Answer 3

这是妨碍您的资产管道...

请按照以下步骤修复它：

复制字体文件glyphicons-halflings-regular.*到文件夹you-app-path/vendor/assets/fonts
复制文件boostrap.css到文件夹you-app-path/vendor/assets/stylesheets
将复制的文件 boostrap.css 重命名为 boostrap.css.erb
编辑文件boostrap.css.erb调整@font-face变量如下： <pre>@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'); } </pre>
Add/adjust 文件中的以下行 you-app-path/config/initializers/assets.rb:

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

将此行添加到文件 you-app-path/app/assets/stylesheets/application.css.scss:

*= require bootstrap

最后，重新启动您的 rails 应用程序，一切都应该正常工作。

Answer 4

我的 CDN 出现 CORS 问题时出现了相同的症状。当我终于打开浏览器的 JavaScript 控制台后，就很明显了。

Bootstrap 3 个 Glyphicons 未在 rails 生产服务器上显示

Bootstrap 3 Glyphicons not showing on rails production server

css

ruby-on-rails

twitter-bootstrap

glyphicons

ruby-on-rails-4