47

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!

17 Answers 17

100

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!

5
  • No problem. Just so you know, the same thing applies with font awesome. Just replace the ../dir/ with /assets!
    – nahtnam
    Nov 30, 2013 at 7:03
  • 9
    If you're using the non-compiled Less or Sass version, you can set the $icon-font-path: "/assets/" variable. May 7, 2014 at 9:49
  • 1
    I followed a better solution here: stackoverflow.com/questions/21962775/…
    – peterept
    Mar 5, 2015 at 4:57
  • Odd, since my files are in /assets/fonts/ but it works
    – Matthias
    Oct 4, 2016 at 13:34
  • 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 stackoverflow.com/a/40898227/1197775
    – sites
    Feb 22, 2017 at 21:24
45

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";
4
  • I am using bootstrap-sass, but I don't have any sass files other than scss. Where do I put this? It doesn't work in the scss files.
    – 6ft Dan
    Jul 15, 2014 at 20:07
  • I figured it out. They needed to be in quotations with semicolons at the end of the lines. I've noticed some behavioural change in the site after this.
    – 6ft Dan
    Jul 15, 2014 at 20:25
  • 3
    @Confusion It is mentioned over here that it should be imported for the icons to work: github.com/twbs/bootstrap-sass#a-ruby-on-rails
    – dhilipsiva
    Aug 18, 2014 at 8:27
  • 1
    Dang. Yeah, this was my problem. That was pretty dumb of me too, since bootstrap-sass's documentation clearly states that you need to import bootstrap-sprockets before boostrap, and I even remember reading that, but for some reason I didn't have that in my code. Oh well... live and learn I guess.
    – Ajedi32
    Apr 3, 2015 at 15:51
36

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.

4
  • Worked for me in Rails 4, thanks. There is a comment in bootstrap_and_overrides.css.less, to enable glyphicons, but it doesn't work :(
    – sadfuzzy
    Jul 28, 2015 at 1:27
  • Thanks!! I've been struggling with that for hours Aug 10, 2015 at 15:16
  • 1
    This also worked for me on localhost but not on Heroku. I found that the comment referred to by @sadfuzzy above (in (for me): /app/assets/stylesheets/bootstrap_and_overrides.css) held the key to this working. For Font Awesome you use: "=require twitter-bootstrap-static/fontawesome" and for Glyphicons you use: "=require twitter-bootstrap-static/sprites".
    – Nathan W
    Jan 13, 2016 at 8:46
  • Per the twitter-bootsrap-rails docs, to enable Glyphicons, add the following to the bootstrap_and_overrides.css.less file: @glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot"); @glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix"); @glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff"); @glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf"); @glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular"); @import "twitter/bootstrap/glyphicons.less";
    – NoelProf
    Mar 1, 2016 at 7:14
30

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.

2
  • 1
    I personally like this answer as I am unable to modify my bootstrap css file Apr 25, 2014 at 4:34
  • Thanks! It works finally after hours of researching T.T
    – Guster
    Aug 3, 2015 at 15:21
10

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

12
  • Will I have to change it to scss? Can I leave it as a css file? Nov 28, 2013 at 1:35
  • Doesnt seem to work. I get an error saying that there was invalid css. It expected a { but instead got a (" Nov 28, 2013 at 1:56
  • Did you change it to bootstrap.css.scss? font-path only works in SASS Nov 28, 2013 at 1:59
  • Yes, I did. I will try again. Nov 28, 2013 at 2:00
  • I tried again and no error! I dont get what to do for the second half. On my local machine I am running in development mode. Nov 28, 2013 at 2:02
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 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.

4

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");
1
  • Thanks. Adding @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"); worked for me. Do you know why?
    – Rahul Roy
    Nov 22, 2015 at 9:05
3

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

2
  • yeah, since asset's path on production includes hash digest. this should be the right answer even in the time this question was asked. it feels like the code in the gem never supposed to work Jul 29, 2016 at 14:08
  • My asset path was different due to a yarn install of bootstrap: src: url('<%= asset_path("bootstrap/fonts/glyphicons-halflings-regular.eot") %>');
    – eikes
    Sep 24, 2019 at 14:21
2

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.

2

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

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.

3
  • 1
    Well I have customized the bootstrap.css file a lot! I dont want to erase any work that has been done so far. Where exactly would the correct files be? Nov 28, 2013 at 1:34
  • You wouldn't have to touch the css file at all. In order for me to fix my problem, I downloaded bootstrap-3.0.2-dist.zip, copied everything from the dist/fonts folder, and replaced the fonts I had added to my project. Nov 28, 2013 at 17:04
  • 1
    I created my project with bootstrap-sass and the fonts weren't working for me. Downloaded the bootstrap zip and just copied the fonts across to the \stylesheets\fonts\bootstrap folder and all was well. Also needed to change my config.rb file as my site wasn't in the root directory.
    – user527892
    Apr 25, 2014 at 8:56
1

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

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

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!

0

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

0

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)
0

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>

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.