Bootstrap 3 Glyphicons 无法在 rails 中正确渲染答案

【问题标题】：Bootstrap 3 Glyphicons are not rendering properly in railsBootstrap 3 Glyphicons 无法在 rails 中正确渲染
【发布时间】：2015-10-13 07:12:07
【问题描述】：

我正在使用以下宝石：

gem 'therubyracer', platforms: :ruby
#gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

在资产管道中，这是代码

*
 *= require_bootstrap_and_overrides
 *= require_self
 *= require_tree .
 */

在 bootstrap_and 覆盖文件中，这是代码

@import "twitter/bootstrap/bootstrap";

// Set the correct sprite paths
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome
//@import "fontawesome/font-awesome";

// Glyphicons
@import "twitter/bootstrap/glyphicons.less";

// Your custom LESS stylesheets goes here

//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @link-color: #ff0000;
@import url(http://fonts.googleapis.com/css?family=Capriola);

当我使用类 <i class="fa fa-user"></i> 时，就像这个 glyphicon 显示的那样。但是对于班级<i class="glyphicon glyphicon-user"></i 字形图标未显示正确的图像。

【问题讨论】：

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

【解决方案1】：

Bootstrap 未正确包含在您的资产管道中，请尝试通过从 CDN 源导入而不是从资产文件加载来解决此问题：

将此添加到 views/layout 文件夹中 application.html.erb 文件的 head 部分：

FontAwesome 图标：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

Glyphicon 图标，与引导压缩 CDN 一起打包：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

【讨论】：

谢谢，它对我有用。你能告诉我如何使用资产管道衬里而不是使用这种 CDN 方法来实现这一点。
在这种情况下，您将需要直接修改引导文件，请尝试按照本文中的步骤操作：stackoverflow.com/questions/21962775/…

【解决方案2】：

我强烈建议您切换到https://github.com/twbs/bootstrap-sass 并按照那里的指南进行操作

【讨论】：