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

我试图摆脱使用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

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