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. 最后， 重啟你的rails應用程序，所有應該工作。

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

做這些改變

@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 4

我有與我的CDN的CORS問題引起的相同症狀。 一旦我最終打開瀏覽器的JavaScript控制台，這一點很明顯。