Ruby on Rails glyphics not working

Question

I added bootstrap to my website. Here is the structure I am using. (I cannot delete the bootstrap.css file, as it changed 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 problem is that the glyphicon arent working, and I need them!

Answer 1

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

I had a very similar problem like you, but I realized that! Find this part in the 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 will look like your latest code.

 @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 helps!

Answer 2

If you are using bootstrap-sass and you have this problem, try importing bootstrap like this into one of your scss files. If you use sass, just convert the syntax:

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

Answer 3

For me as a twitter-bootstrap-rails user:

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

For my application.css problem is fixed.

Hope to be helpful.

Answer 4

I also tried my best to make glyphicon boostrap3 in rails 4. I solved this 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 and

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

to the application.rb file.

Answer 5

I think you might have a problem with the 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 (see 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 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 issue

Hope this helps

Answer 6

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 use is not updated (check for the b3 branch), then you may need to fork and change the icon names yourself.

Answer 7

Chrome appears to have been damaged for several months after this problem.

This worked for me when I put it at the beginning 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"); 

Answer 8

According to Bootstrap 3 Glyphicons do not work , there is an error with the Bootstrap setting, which messed up the glyphicon fonts. I had the same problem, but I was able to fix it by downloading the entire download from http://getbootstrap.com/ and then copying the font files to the right place.

Answer 9

In Rails 4 using sass, Bootstrap 3.2.0, and a self-loading gem, use:

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

Answer 10

You can also try the following:

 @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 file your_css.css to your_css.css.erb

Answer 11

I tried with the proposed solution, and it did not work for me, here is a general solution that will help you fix any problem you might have with this.

Here is the resulting font face definition using 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'); } 

Answer 12

You can copy all bootstrap font files to public / fonts and this will work. No import or changes to application.rb required.

Answer 13

When I use bootstrap in my rail applications, I use the bootstrap-sass self-test.

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

You can override it. Just import it as the docs explain. Then import or paste the modified files.

The glyph did not work in the php project, I downloaded the classic boot zip and I extracted the glyph files to replace them in the project. In my memories, an error appears when you create a custom bootstrap style from their site (the source of the error may be incorrect).

Hope this helps!

Answer 14

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

Answer 15

Make sure you install

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

And add the fonts to the precompilation list

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

Answer 16

In my case, I used this <i class="icon-plus"></i> , which I took from the official Bootstrap website and did not see anything. But instead, you need to use this <i class="glyphicon glyphicon-plus"></i>

Answer 17

If you have glyphicons files in app/assets/fonts (if you do not, you can download them from 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'); }