Rails 4.1和Bootstrap 3 glyphicons無法正常工作

Question

我試圖擺脫使用Bootstrap 3的Rails 4項目中的glyphicon錯誤。我沒有使用任何Bootstrap gems將其添加到資產管道。 我手動將bootstrap.css和bootstrap.js添加到各自的app/assets目錄，並將它們添加到application.css和application.js我現在看到的是我的Web瀏覽器控制台中的以下內容：

GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.svg 404 (Not Found) 

在Ruby on Rails應用程序中可以做些什么來解決這個問題？ 我嘗試將所述文件復制到app/assets/fonts並將其彈出到application.rb ：

config.assets.paths << "#{Rails}/app/assets/fonts"

沒運氣。

Answer 1

上面提供的所有解決方案都是臟的。 解決此問題的正確方法是在sass文件中的bootstrap之前包含“bootstrap-sprockets”：

@import "bootstrap-sprockets";
@import "bootstrap";

Answer 2

為了讓glyphicons工作，我必須在config / application.rb文件中添加一行。 在Application <Rails :: Application類中添加以下內容。

config.assets.paths << "#{Rails}/vendor/assets/fonts"

然后在終端運行命令以獲取要編譯的資產：

rake assets:precompile RAILS_ENV=development

現在我們需要更新bootrap.css文件（您可能也需要更新bootstrap.min.css文件），使用文本編輯器搜索@ font-face並更新字體URL的路徑包括/assets/glyphicons-halfings-regular.*（包括文件擴展名）。

這是url最初將在bootstrap.css文件中的內容。

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

您希望將每個資源位置更改為/assets/glyphicons-halfings-regular.*，如下所示。

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

消息來源： [Erik Minkel博客]

Answer 3

基本上你應該只導入bootstrap

@import "bootstrap-sprockets";
@import "bootstrap";

在@import "bootstrap-sprockets";之前導入引導程序組件時出現問題@import "bootstrap-sprockets"; 覆蓋應該在@import "bootstrap-sprockets";

// bootstrap-sprockets goes first
@import "bootstrap-sprockets";

// Overrides
@import "bootstrap/variables"; // it uses $bootstrap-sass-asset-helper which is defined in bootstrap-sprockets
$btn-primary-bg: $gray-light;

@import "bootstrap";

Answer 4

將woff，ttf和svg文件添加到：

RAILS_ROOT/vendor/assets/fonts

如果它不存在，請創建它。 它們應該出現在您下載的bootstrap構建中。

此外，您需要在所有require語句之后將其添加到application.css：

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

Answer 5

將字體移動到/ app / public文件夾有效，但看起來不像Rails方式。

對我來說有用的是把它們放在/ app / assets / fonts中並在bootstrap.css中對它進行評論：

/*
@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.woff2') format('woff2'), 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');
}
*/