Bootstrap 3 Glyphicons не отображаются должным образом в рельсах

Я использую следующие драгоценные камни:

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 overrides это код

@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>, как показывает этот глификон. Но для класса <i class="glyphicon glyphicon-user"></i глификон не отображает правильное изображение.


person John    schedule 23.07.2015    source источник


Ответы (2)


Bootstrap неправильно включается в ваш конвейер ресурсов, попробуйте этот обходной путь, импортировав из источника CDN вместо загрузки из файла ресурса:

Добавьте это в раздел head файла application.html.erb в папке views/layout:

Значки FontAwesome:

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

Значки Glyphicon, упакованные с минимизированной сетью загрузки при начальной загрузке:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
person ifma    schedule 23.07.2015
comment
спасибо, это сработало для меня. не могли бы вы рассказать мне, как реализовать это, используя облицовку канала активов вместо использования этого подхода CDN. - person John; 23.07.2015
comment
В этом случае вам нужно будет напрямую изменить файлы начальной загрузки, попробуйте выполнить шаги, описанные в этом сообщении: stackoverflow.com/questions/21962775/ - person ifma; 23.07.2015

Я настоятельно рекомендую вам перейти на https://github.com/twbs/bootstrap-sass. и следуйте инструкциям там

person coorasse    schedule 23.07.2015