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

这是资产管道阻碍你的方式......

请按照以下步骤进行修复:

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. 将此行添加到文件you-app-path/app/assets/stylesheets/application.css.scss:

*= require bootstrap

7. 最后,restart你的rails应用程序和所有应该工作.