Bootstrap 3+Rails 4 - Certain Glyphicons not working

Question

I am trying to use bootstrap 3 in my rails 4 app. Followed this tutorial to set up bootstrap 3 using bootstrap saas from this github page.

Bootstrap is working fine but glyphicons are not working as expected.

Certain glyphicons are not displaying at all. For e.g. I tired to display a few of them for testing in my application.html.erb:

glyphicon glyphicon-floppy-disk -> <span class="glyphicon glyphicon-floppy-disk"></span>
</br>
glyphicon glyphicon-plus -> <span class="glyphicon glyphicon-plus"></span>
</br>
glyphicon glyphicon-minus -> <span class="glyphicon glyphicon-minus"></span>

The icons render like this

The floppy-disk icon is not rendered at all (showing an invalid charecter) The plus and minus sigs are not bold and much smaller than the ones shown on the bootstap website.

I am also seeing the following messages on the rails console.

Started GET "/fonts/glyphicons-halflings-regular.woff" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff"):

Started GET "/fonts/glyphicons-halflings-regular.ttf" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

Started GET "/fonts/glyphicons-halflings-regular.svg" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.svg"):

I would really appreciate your inputs on this issue.

Thanks!

Have you looked at this post: http://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-not-working ? — Beel, Feb 23 '14 at 01:31
I did check that and also tried copying over the font files from he bootstrap site and that didn't help either. And since I am using sass bootstrap, could you tell me if the updates to "@font_face.." would apply to me? And if yes, which file should I be updating. Thanks! — Mike G, Feb 23 '14 at 02:10
where did you copy fonts dir? What happens when you visit /fonts/glyphicons-halflings-regular.woff in browser? — lobanovadik, Feb 23 '14 at 07:41

score 54 · Answer 1 · answered Apr 08 '14 at 04:23

I had the same problem and found a solution. Full credit goes to Eric Minkel, who wrote a detailed blog post on the topic. I would highly suggest reading it for further reasoning.

Edit app/assets/stylesheets/application.css by adding:
```
*= require bootstrap
```
Edit app/assets/javascripts/application.js by adding:
```
//= require bootstrap
```
In config/application.rb, add the following after class Application < Rails::Application. It should look like this:
```
class Application < Rails::Application
    config.assets.paths << "#{Rails}/vendor/assets/fonts"
```
In the terminal, compile your assets by running:
```
rake assets:precompile RAILS_ENV=development
```

Edit the bootstrap.css file by changing @font-face resource locations from ../fonts/ to /assets/. It should look like this:

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

You're done. Just restart with rails s and the glyphicons should appear.

Was having the same problem, *Some* of the fonts were missing. Step 4 fixed it for me. Thanks. — user2110836, Jun 18 '14 at 00:55
thanks , solved ... was using the css.min, so I decompressed it and did the modification step 5 — , Oct 12 '14 at 16:44
In addition to this I also had to add `config.assets.precompile += %w( *.svg *.eot *.woff *.ttf )` to my application.rb to get the precompiler to see the font files. — Adam Plumb, Mar 13 '15 at 14:54
And don't forget to create fonts folder in vendor/assets and copy fonts to it. Fonts are available in bootstrap.zip from bootstrap site. — Marat, May 21 '16 at 19:01
rake assets:precompile RAILS_ENV=development was all I needed. This answer really shouldn't be at the bottom. — LunaCodeGirl, May 12 '17 at 05:57

score 30 · Answer 2 · edited Mar 21 '18 at 17:52

30

Just use:

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

in your SCSS or SASS file. "bootstrap-sprockets" is required for image and font fix.

Chances are you already have:

@import "bootstrap";

declared in application.scss.

edited Mar 21 '18 at 17:52

tk421

5,775
6
23
34

answered Aug 21 '14 at 15:35

istickz

403
4
8

1

Same here. Updated my gem and things weren't working till I did this. – Mark Hustad Feb 23 '15 at 02:11
1

I already have those imports in my application.css.scss file I still get square boxes instead glyphicons :/ – Mr_LinDowsMac Aug 17 '15 at 16:37
1

Important, order matters. – Andrew Potapov Aug 27 '16 at 22:31

score 13 · Answer 3 · answered Dec 03 '14 at 21:42

13

I was having this same problem. Solved by adding:

@import "bootstrap-sprockets";

above the existing line:

@import 'bootstrap';

in my /app/stylesheets/bootstrap_and_customisation.css.scss file

answered Dec 03 '14 at 21:42

Yorkshireman

2,194
1
21
36

score 11 · Answer 4 · answered Aug 02 '14 at 20:08

11

I had the same problem. Something is wrong with the font path in bootstrap. Fortunately it is a fairly easy fix:

$icon-font-path: 'bootstrap/';

This fixed it for me. Should go before importing bootstrap-sass. You might need to change the value here.

answered Aug 02 '14 at 20:08

Radoslav Stankov

624
5
14

that worked for me rails 4.1 also. I tested in both dev environment (and deleted my entire `public/assets` folder) - it worked. Then I switched to needing precomiled assets in environments/development.rb `config.assets.debug = false; config.assets.compile = false; config.assets.digest = true` and `$ rake assets:precompile` and can see public/assets/bootstrap with the fonts. Restarted rails and it also works. Thank you sooo much!! – peterept Mar 05 '15 at 03:50
My full font include in application.scss was `@font-face { font-family: 'Glyphicons Halflings'; src: url(asset_path('bootstrap/glyphicons-halflings-regular.eot')); src: url(asset_path('bootstrap/glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'), url(asset_path('bootstrap/glyphicons-halflings-regular.woff')) format('woff'), url(asset_path('bootstrap/glyphicons-halflings-regular.ttf')) format('truetype'), url(asset_path('bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg'); }` – peterept Mar 05 '15 at 03:52
Confirming this is the solution that works for Rails 4.2.1 as well. – Marius Butuc Mar 28 '15 at 00:17
No, this does not work for Rails 4.2.1. At least not here, and at least not with the 'glyphicon-log-book' icon. It remains invisible. – RubyRedGrapefruit May 11 '15 at 03:43

score 6 · Answer 5 · answered Mar 10 '16 at 20:48

Update to this. I was having the same issue and went through the steps provided by the #1 answer from Oddurs. That didn't work for me for some reason. And then I realized it had to do with the file structure in my public folder (not sure why mine was different).

Basically I got it to work by adding "/bootstrap" after "/assets" since all my glyphicons were in a "/bootstrap" folder I believe by default

So instead of this:

@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 did this:

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

in the application.css. Hopefully that helps somebody

score 4 · Answer 6 · answered Jun 20 '14 at 06:56

4

Another solution would be copying the fonts folder into public so you have

public/fonts/glylpicons-.....

The same solutions would work for font-awesome etc. The only downside of this is if you change your font-files often :o)

answered Jun 20 '14 at 06:56

DaCart

71
3

score 4 · Answer 7 · answered Jul 09 '15 at 16:25

4

If you are using bootstrap-sass-official, add this before you import bootstrap:

$icon-font-path: 'bootstrap-sass-official/assets/fonts/bootstrap/';

answered Jul 09 '15 at 16:25

dipole_moment

5,266
4
39
55

score 4 · Answer 8 · answered Aug 13 '15 at 18:10

For me this was an issue with incompatibility of versions between bootstrap-sass and sass.

If you inspect your generated application.css you will see the @font-face is wrapped inside a @at-root, which is a new sass declaration not supported by the version of sass I was using.

I've upgraded sass-rails to 5.0.3 and sass to 3.4.16 and it worked (sass needs to be at least 3.3).

score 3 · Answer 9 · edited May 23 '17 at 11:55

3

I had a similar problem and discovered an older version of the bootstrap assets were being served. Thanks to this post: Rails with Twitter Bootstrap: still serving an old asset I just ran rake tmp:clear and all worked after that.

edited May 23 '17 at 11:55

Community

1
1

answered Sep 06 '15 at 22:52

mahi-man

4,326
2
25
36

score 2 · Answer 10 · answered May 07 '15 at 13:02

I am using twitter-bootstrap-rails, and the error message is /assets/twitter/fonts/...

The reason is the twitter-bootstrap-rails gem doesn't include the Glyphicons resources in it's vendor directory. I have tried all solutions above, but none of them worked.

The final solution for me is to download the zip file from bootstrap official site, unzip it, move the missing files to public/assets/twitter/fonts directory. It works for my development environment.

score 1 · Answer 11 · answered Oct 31 '15 at 00:05

Make sure your gemfile is up to date and that the vendor/cache is clear.

My issue was due to odd versions of gems, so I ran bundle update which refreshed the cache.

Updating files in vendor/cache
Removing outdated .gem files from vendor/cache
  * bullet-4.14.9.gem
  * bootstrap-sass-3.3.5.gem
  * pry-0.10.2.gem
  * webmock-1.21.0.gem
  * sprockets-2.12.4.gem
  * minitest-reporters-1.1.3.gem
  * sass-3.2.19.gem
  * coffee-rails-4.0.1.gem
  * hashie-3.4.2.gem
  * newrelic_rpm-3.13.2.302.gem
  * nprogress-rails-0.1.6.7.gem
  * schema_plus_pg_indexes-0.1.7.gem
  * hike-1.2.3.gem
  * minitest-5.8.1.gem
  * tilt-1.4.1.gem
  * sass-rails-4.0.5.gem
Bundle updated!

Once I did that, for good measure I make for other caches cleared too rake assets:clobber and re-compiled the assets RAILS_ENV=production rake assets:precompile.

Then I restarted nginx ../bin/restart and magic.... the glyphicons appeared instead of a odd square thing in Firefox on the desktop and a camera on the iPad. All in place of the man glyphicon.

score 0 · Answer 12 · answered Aug 15 '14 at 02:42

Ran into same problems when upgrading to Rails 4.1.4, bootstrap-sass 3.2.0.

Good hints above but none did the trick for me.

These steps worked:

Copy font files to RAILS_ROOT/vendor/assets/fonts/bootstrap/ (you probably need to create the directory)
Add this to config/application.rb

config.assets.paths += %W("#{Rails.root}/vendor/assets/fonts")

Didn't need any special directives or sass variable re-definitions.

score 0 · Answer 13 · answered Oct 25 '14 at 01:54

0

I was having trouble viewing:

<span class="glyphicon glyphicon-edit"></span>

in my development environment. The following adjustment worked.

In your css.scss file add:

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

answered Oct 25 '14 at 01:54

erickuhn19

39
2

Châu Hồng Lĩnh · Answer 14 · 2016-06-06T06:08:36.280

If you are tired of the magic of bootstrap-sass or twitter-bootstrap-rails, or if you want to stay with a specific version of bootstrap, here is manual thing you can do:

Download bootstrap from http://getbootstrap.com/, put the files inside your #{Rails.root}/vendor/assets/javascripts
In the file app/assets/javascripts/application.js, write //= require 'bootstrap-3.3.6-dist/js/bootstrap.min'
In the file app/assets/stylesheets/application.css, write *= require 'bootstrap-3.3.6-dist/css/bootstrap.min'
Put a script like this in your {Rails.root}/bin and configure it to run by capistrano when you deploy to production:

#!/usr/bin/env ruby     

rails_path = File.expand_path('../../', __FILE__)
puts rails_path

`mkdir public/images`

Dir.glob("#{rails_path}/vendor/assets/**/images").each do |directory|
  `cp #{directory}/* #{rails_path}/public/images/`
end

`mkdir public/fonts`

Dir.glob("#{rails_path}/vendor/assets/**/fonts").each do |directory|
  `cp #{directory}/* #{rails_path}/public/fonts/`
end

Configure nginx on your production machines to serve public/images and public/fonts.

        location ~ ^/(assets|images|fonts)/(.*)$ {
            alias /var/www/my_app/current/public/$1/$2;
            gzip on;
            expires max;
            add_header Cache-Control public;
        }

From now on, each time you say cap production deploy, all the manual things will be taken care of.

score 0 · Answer 15 · answered Jun 14 '16 at 10:18

0

You can copy all the bootstrap font files to public/fonts and it will work

answered Jun 14 '16 at 10:18

Danut Codrescu

61
2

score 0 · Answer 16 · answered Aug 22 '16 at 12:40

0

Using rails 4.2.6

I had to edit config/application.rb

I added this line

.
.
.
class Application < Rails::Application
   config.action_controller.relative_url_root = '/myapp'

Now the fonts were being referenced relative to the relative_url_root value.

answered Aug 22 '16 at 12:40

mwangi

1,616
1
20
23

I did the a similar thing and set the config.relative_url_root in the environment files (app/environments/production.rb) and that fixed my problem. We control this at environment level because our production/uat environments require a relative path but development and test do not. – Mark Davies Sep 11 '17 at 09:38

score 0 · Answer 17 · answered Sep 21 '16 at 04:23

Adding the following to application.scss worked for me on Rails 5 (after uncommenting @import "bootstrap/glyphicons";from the same file [using the orats gem])

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

score 0 · Answer 18 · answered Nov 20 '16 at 22:19

0

I am using angular-ui-bootstrap-rails gem

gem 'angular-ui-bootstrap-rails'

I downloaded bootstrap and pasted the fonts folder under app/assets folder

Then restart rails server.

answered Nov 20 '16 at 22:19

Mahesh

3,727
1
39
49

score 0 · Answer 19 · answered Jun 11 '20 at 03:40

In my case: We are planning to upgrade our legacy app from Rails 3.2 to Rails 4.0. And suddenly the glyph icons didn't show up. We were using gem 'bootstrap-sass', '~> 3.0.3.0' so could not upgrade to latest 3.4

Problem Definition

The main reason seems to be unresolved sass function call twbs-font-path(" in file http://localhost:3000/assets/bootstrap/application.self.css?body=1

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

which should have been like this

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

Solution

New installation guideline for Rails seems to be

// app/assets/stylesheets/bootstrap/application.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

but problem is file bootstrap-sprockets is not defined in the version I am using. So I have to copy the content of the file from GitHub and create it in my codebase.

// app/assets/stylesheets/bootstrap/_bootstrap-sprockets.scss

@function twbs-font-path($path) {
  @return font-path($path);
}

@function twbs-image-path($path) {
  @return image-path($path);
}

And it solved the problem. I hope it also helps you.

Goaul · Answer 20 · 2022-11-02T20:55:02.953

With sprockets 4 changed paths, and if there is no option to migrate bootstrap to 4 or 5, then need to stick to this gem.

So what I did is override that @import "bootstrap_sprockets" by making new file in overrides folder bootstrap_sprockets.scss, with content:

@function twbs-font-path($path) {
  @return $path;
}

@function twbs-image-path($path) {
  @return image-path($path);
}

$bootstrap-sass-asset-helper: true;
$icon-font-path: "bootstrap/";

Using this option Where in application.scss file links that file with @import "bootstrap-custom";

Content of "bootstrap-custom.scss":

@import "../overrides/bootstrap_sprockets";

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

or just:

@import "../overrides/bootstrap_sprockets";
@import "bootstrap";

Posted also to the repo issue

Bootstrap 3+Rails 4 - Certain Glyphicons not working

20 Answers20

Problem Definition

Solution

Linked