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!

user3024194
  • 539
  • 2
  • 6
  • 10

17 Answers17

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!

nahtnam
  • 2,659
  • 1
  • 18
  • 31
  • No problem. Just so you know, the same thing applies with font awesome. Just replace the ../dir/ with /assets! – nahtnam Nov 30 '13 at 07:03
  • 9
    If you're using the non-compiled Less or Sass version, you can set the `$icon-font-path: "/assets/"` variable. – Joshua Muheim May 07 '14 at 09:49
  • 1
    I followed a better solution here: http://stackoverflow.com/questions/21962775/bootstrap-3rails-4-certain-glyphicons-not-working/25098941#25098941 – peterept Mar 05 '15 at 04:57
  • Odd, since my files are in /assets/fonts/ but it works – Matthias Oct 04 '16 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 http://stackoverflow.com/a/40898227/1197775 – sites Feb 22 '17 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";
vladCovaliov
  • 4,333
  • 2
  • 43
  • 58
  • 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 '14 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 '14 at 20:25
  • 3
    @Confusion It is mentioned over here that it should be imported for the icons to work: https://github.com/twbs/bootstrap-sass#a-ruby-on-rails – dhilipsiva Aug 18 '14 at 08:27
  • 1
    Dang. Yeah, this was my problem. That was pretty dumb of me too, since `bootstrap-sass`'s documentation [clearly states](https://github.com/twbs/bootstrap-sass#a-ruby-on-rails) 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 03 '15 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.

Langusten Gustel
  • 10,917
  • 9
  • 46
  • 59
  • 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 '15 at 01:27
  • Thanks!! I've been struggling with that for hours – Evgeniya Manolova Aug 10 '15 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 '16 at 08: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 01 '16 at 07: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.

Niels Abildgaard
  • 2,662
  • 3
  • 24
  • 32
jbmyid
  • 1,985
  • 19
  • 22
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

Community
  • 1
  • 1
strivedi183
  • 4,749
  • 2
  • 31
  • 38
  • Will I have to change it to scss? Can I leave it as a css file? – user3024194 Nov 28 '13 at 01:35
  • Doesnt seem to work. I get an error saying that there was invalid css. It expected a { but instead got a (" – user3024194 Nov 28 '13 at 01:56
  • Did you change it to `bootstrap.css.scss`? `font-path` only works in SASS – strivedi183 Nov 28 '13 at 01:59
  • Yes, I did. I will try again. – user3024194 Nov 28 '13 at 02: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. – user3024194 Nov 28 '13 at 02:02
  • For the second half, it's there for whenever you deploy it to a server, so you don't get an error when you go live on production, but it works now? – strivedi183 Nov 28 '13 at 02:04
  • The error is gone, but there is no glyphicon, just some % signs. – user3024194 Nov 28 '13 at 03:23
  • I updated the answer, also if you look at the console using the [chrome developer tools](https://developers.google.com/chrome-developer-tools/docs/console), and paste any errors or issues that come up, that might be helpful – strivedi183 Nov 28 '13 at 03:30
  • This is the error log from chrome. I updated everything and its still not working! Is there an easy way to fix this? – user3024194 Nov 28 '13 at 03:43
  • @user2262149 This is a highly ineffective since you can pretty much do it in css. Check my answer above. – nahtnam Dec 01 '13 at 03:43
  • Thanks, I used to do it that way but when I pushed it to production, it couldn't find that address, because rails adds a hash to the each asset when adds a fingerprint (http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark) so the solution above worked for me in production, but thanks for the comment and glad your solution worked! – strivedi183 Dec 01 '13 at 04:10
  • Worked right away, and looks cleaner than other solutions. – naitoon Apr 10 '14 at 21:27
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.

Danny
  • 3,982
  • 1
  • 34
  • 42
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");
AliInvestor
  • 143
  • 1
  • 4
  • 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 '15 at 09: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

Ravi Kumar SIngh
  • 311
  • 1
  • 4
  • 17
  • 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 – Ondřej Želazko Jul 29 '16 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 '19 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.

Danut Codrescu
  • 61
  • 2
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');
}
Community
  • 1
  • 1
sites
  • 21,417
  • 17
  • 87
  • 146
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.

Community
  • 1
  • 1
LeoPleurodon
  • 295
  • 3
  • 11
  • 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? – user3024194 Nov 28 '13 at 01: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. – LeoPleurodon Nov 28 '13 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. –  Apr 25 '14 at 08:56
1

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

@import "bootstrap";
@import "bootstrap/theme";
Marc Durdin
  • 1,675
  • 2
  • 20
  • 27
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!

coding addicted
  • 3,422
  • 2
  • 36
  • 47
0

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

Ben Hare
  • 4,365
  • 5
  • 27
  • 44
feng
  • 1
  • 2
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)
Deepak Mahakale
  • 22,834
  • 10
  • 68
  • 88
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>

Andrey
  • 191
  • 2
  • 6
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');
}
aruanoc
  • 817
  • 1
  • 7
  • 9