Bootstrap 3 字形图标错误答案

【问题标题】：Bootstrap 3 Glyphicon errorsBootstrap 3 字形图标错误
【发布时间】：2014-01-30 21:37:33
【问题描述】：

我意识到这里已经回答了类似的问题，但其中许多答案是使用 gems 或直接修改 Bootstrap 的文件。虽然这些都是有效的配置，但我想增加我在这方面的知识（Sprockets、Rails Pipeline、一般的前端开发），并想了解为什么这不起作用，潜在的问题是什么。

Ruby 2.0.0-p353、Rails 4.0.2、Bootstrap 3.0.3、Nginx 1.4.4、Passenger 4.0.33

我从他们的网站下载了最新的 Bootstrap zip，执行了找到 here 的所有操作以将这些文件直接包含到我的应用程序中，并且能够让字形图标完全按照预期在我的开发环境中显示。但是，当我部署到生产环境时，字形图标在 Chrome 中显示为正方形。我将 glyphicons 文件的单个文件扩展名添加到生产预编译中，并验证它们显示在我的 public/assets 文件夹中。 js/css 文件和 glyphicon 文件之间的唯一区别是 glyphicon 文件旁边没有 gzip 压缩文件。

production.rb：

config.assets.precompile = ['*.js', '*.css', '*.eot', '*.svg', '*.ttf', '*.woff']

我知道 Rails 在开发和生产环境中加载资产的方式不同，但为什么它没有看到或理解生产环境中的 glyphicon 资产？有没有办法用我当前的配置来解决这个问题，还是我需要改变我包含这些资产的方式以允许我修复这个错误？

此外，在开发和生产中，每次渲染使用字形图标的页面时都会出现以下错误，但图标仍然显示。这有关系吗？

ActionController::RoutingError（没有路由匹配 [GET] "/fonts/glyphicons-halflings-regular.woff")
ActionController::RoutingError（没有路由匹配 [GET] "/fonts/glyphicons-halflings-regular.ttf")
ActionController::RoutingError（没有路由匹配 [GET] "/fonts/glyphicons-halflings-regular.svg")

【问题讨论】：

+1 无法正常工作
@import "bootstrap-sprockets" before @import "bootstrap" 帮助了我，虽然我不知道问题的原因。

标签： css ruby-on-rails twitter-bootstrap-3 glyphicons

【解决方案1】：

您应该从网站手动下载 glyphicons 字体并将其放入您的 app/assets/stylesheets/fonts 文件夹中。

bootstrapgem 还没有解决一些问题

您可以参考以下链接

Bootstrap 3 Glyphicons are not working

【讨论】：

【解决方案2】：

在config/application.rb 中，在class Application < Rails::Application 之后添加以下内容。它应该是这样的：
```
class Application < Rails::Application
    config.assets.paths << "#{Rails}/vendor/assets/fonts"
```
在终端中，运行以下命令编译您的资产：
```
rake assets:precompile RAILS_ENV=development
```

通过将@font-face 资源位置从../fonts/ 更改为/assets/ 来编辑bootstrap.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');
}

你已经完成了。只需使用rails s 重新启动，字形图标就会出现。

【讨论】：