CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap
user3024194
user3024194

Reputation: 539

Ruby on Rails Bootstrap Glyphicons not working

I have added bootstrap to my site. Here is the structure I am using. (I cannot whatsoever remove the bootstrap.css file since it I modified it to my liking).

>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css

Everything is imported correctly, but the issue is that the glyphicons arent working and I need them!

Upvotes: 47

Views: 59902

Answers (17)

aruanoc
aruanoc

Reputation: 867

Provided that you have the glyphicons files in app/assets/fonts (if you don't, you can download them from the bootstrap-saas repo), create app/assets/stylesheets/fonts.scss and add the following:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  font-url('glyphicons-halflings-regular.woff') format('woff'),
  font-url('glyphicons-halflings-regular.ttf') format('truetype'),
  font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Upvotes: 0

Ravi Kumar SIngh
Ravi Kumar SIngh

Reputation: 321

You can also try this: 

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('<%= asset_path("glyphicons-halflings-regular.eot") %>');
  src: url('<%= asset_path("glyphicons-halflings-regular.eot?#iefix") %>') format('embedded-opentype'), url('<%= asset_path("glyphicons-halflings-regular.woff2") %>') format('woff2'), url('<%= asset_path("glyphicons-halflings-regular.woff") %>') format('woff'), url('<%= asset_path("glyphicons-halflings-regular.ttf") %>') format('truetype'), url('<%= asset_path("glyphicons-halflings-regular.svg#glyphicons_halflingsregular") %>') format('svg');
}

You just need to convert your your_css.css file to your_css.css.erb

Upvotes: 3

Andrey
Andrey

Reputation: 371

In my case I used this <i class="icon-plus"></i>, which I took from oficcial site of Bootstrap and didn't see anything. But instead, it is neccessary to use this <i class="glyphicon glyphicon-plus"></i>

Upvotes: 0

Deepak Mahakale
Deepak Mahakale

Reputation: 23711

Make sure you have set

# config/environments/production.rb
config.assets.compile = true

And add fonts to precompile list

# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)

Upvotes: 0

feng
feng

Reputation: 1

In my index.html.slim file, I replaced span.glyphicon.glyphicon-calendar with span.fa.fa-calendar and it worked.

Upvotes: 0

sites
sites

Reputation: 21815

I tried with suggested solution and it did not work for me, here is a generic solution that helps you troubleshoot any problem related to this you might have.

Here is the resulting font face definition with bootstrap-sass:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot');
  src:
    asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    asset-url('bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'),
    asset-url('bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    asset-url('bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Upvotes: 2

Danut Codrescu
Danut Codrescu

Reputation: 81

You can copy all the bootstrap font files to public/fonts and it will work. No need for imports or changes in the application.rb.

Upvotes: 2

nahtnam
nahtnam

Reputation: 2689

November 2015 EDIT: I would recommend this gem: https://github.com/twbs/bootstrap-sass It is actively maintained by the Bootstrap community and works really well with Ruby on Rails.

I was having a very similar issue as you but I figure it out! Find this part in your bootstrap.css file:

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

and replace ../fonts/ with /assets. This is what your final code will look like.

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

I hope this helped!

Upvotes: 100

AliInvestor
AliInvestor

Reputation: 143

Apparently Chrome has been broken for months re this issue.

This worked for me when I put it in the top of my customization_css.css.scss file 

@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Upvotes: 4

Langusten Gustel
Langusten Gustel

Reputation: 11002

For me as a twitter-bootstrap-rails user:

Thanks to take's post @ GitHub

Adding this:

/* Override Bootstrap 3 font locations */
@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');
}

to my application.css fixed the issue.

Hope to be helpful.

Upvotes: 36

vladCovaliov
vladCovaliov

Reputation: 4403

If you are using bootstrap-sass and you have this issue try to import bootstrap like this in one of your scss files. If you use sass, just convert the syntax:

@import "bootstrap-sprockets";
@import "bootstrap";

Upvotes: 45

Marc Durdin
Marc Durdin

Reputation: 1803

In Rails 4, with sass, Bootstrap 3.2.0, and the bootstrap-sass gem use:

@import "bootstrap";
@import "bootstrap/theme";

Upvotes: 1

jbmyid
jbmyid

Reputation: 2015

I was also struggling to make boostrap3 glyphicon work in rails 4. I solved it by adding 

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(asset_path('glyphicons-halflings-regular.eot'));
  src: url(asset_path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'), url(asset_path('glyphicons-halflings-regular.woff')) format('woff'), url(asset_path('glyphicons-halflings-regular.ttf')) format('truetype'), url(asset_path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
}`

to application.css.scss file and 

config.assets.paths << "#{Rails}/vendor/assets/fonts"

to application.rb file.

Upvotes: 30

Danny
Danny

Reputation: 4124

Bootstrap 3 icons look like this:

<i class="glyphicon glyphicon-indent-right"></i>

whereas Bootstrap 2 looked like this:

<i class="icon-indent-right"></i>

If the code you are using isn't up to date (check for a b3 branch), then you may have to fork and change the icon names your self.

Upvotes: 6

coding addicted
coding addicted

Reputation: 3430

When i use bootstrap in my rails apps i use the bootstrap-sass gem.

https://github.com/thomas-mcdonald/bootstrap-sass

You can override it. Simply import it as the docs explain. Then Import or paste your modified files.

In a php project, the glyph weren't working, i download the classic bootstrap zip and i extracted the glyph files to replace them in the project. In my memories the bug appears when you generate a custom bootstrap style from their site (the source of the bug can be wrong).

Hope this helps!

Upvotes: 0

strivedi183
strivedi183

Reputation: 4831

I think you might be having a problem with the asset pipeline

You want to change bootstrap.css to bootstrap.css.scss and then replace where it uses

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

with font-path (look at section 2.3.2 - CSS and Sass)

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-path('glyphicons-halflings-regular.eot');
  src: font-path('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    font-path('glyphicons-halflings-regular.woff') format('woff'), 
    font-path('glyphicons-halflings-regular.ttf') format('truetype'), 
    font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Also in your config/environments/production.rb

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

In your config/application.rb

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Check out another SO post for a similar problem

Hope this helps

Upvotes: 10

LeoPleurodon
LeoPleurodon

Reputation: 305

According to Bootstrap 3 Glyphicons are not working, there's a bug with the Bootstrap customizer that messes up the glyphicon fonts. I had the same issue, but I was able to fix it by downloading the entirety of bootstrap from http://getbootstrap.com/, and then copying the font files to the correct location.

Upvotes: 1

Related Questions