2

I am using the following gems:

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"

and in asset pipeline this is the code

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

and in bootstrap_and overrides file this is the code

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

and when i use the class <i class="fa fa-user"></i> like this glyphicon is showing. But for the class <i class="glyphicon glyphicon-user"></i the glyphicon is not displaying the proper image.

ifma
  • 3,673
  • 4
  • 26
  • 38
John
  • 1,273
  • 3
  • 27
  • 61

2 Answers2

1

Bootstrap is not being included in your asset pipeline correctly, try this workaround by importing from the CDN source instead of loading from an asset file:

Add this to the head section of your application.html.erb file in your views/layout folder:

FontAwesome icons:

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

Glyphicon icons, which are packaged with the bootstrap minified CDN:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
ifma
  • 3,673
  • 4
  • 26
  • 38
  • thanks, it worked for me. can you please tell me how to implement this using asset pipe lining instead of using this CDN Approach. – John Jul 23 '15 at 07:09
  • In that case you will need to modify the bootstrap files directly, try following the steps in this post: http://stackoverflow.com/questions/21962775/bootstrap-3rails-4-certain-glyphicons-not-working – ifma Jul 23 '15 at 07:24
0

I would strongly suggest you to switch to https://github.com/twbs/bootstrap-sass and follow the guide there

coorasse
  • 5,278
  • 1
  • 34
  • 45