Bootstrap 3+Rails 4 - Certain Glyphicons not working

Asked 23/2, 2014 at 0:58 Answered 2/11, 2022 at 17:1

ruby-on-rails-4 twitter-bootstrap-3 twitter-bootstrap-rails

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!

Dichroic answered 23/2, 2014 at 0:58 Comment(3)

Have you looked at this post: #18369536 ? – Mourant 23/2, 2014 at 1: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! – Dichroic 23/2, 2014 at 2:10

where did you copy fonts dir? What happens when you visit /fonts/glyphicons-halflings-regular.woff in browser? – Tommyetommyrot 23/2, 2014 at 7:41

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.

Exertion answered 8/4, 2014 at 4:23 Comment(5)

Was having the same problem, Some of the fonts were missing. Step 4 fixed it for me. Thanks. – Torrance 18/6, 2014 at 0:55

thanks , solved ... was using the css.min, so I decompressed it and did the modification step 5 – Cheat 12/10, 2014 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. – Pettifogging 13/3, 2015 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. – Leitmotiv 21/5, 2016 at 19:1

rake assets:precompile RAILS_ENV=development was all I needed. This answer really shouldn't be at the bottom. – Coccid 12/5, 2017 at 5:57

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.

Transship answered 21/8, 2014 at 15:35 Comment(3)

Same here. Updated my gem and things weren't working till I did this. – Overstudy 23/2, 2015 at 2:11

I already have those imports in my application.css.scss file I still get square boxes instead glyphicons :/ – Label 17/8, 2015 at 16:37

Important, order matters. – Musing 27/8, 2016 at 22:31

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

Evert answered 3/12, 2014 at 21:42 Comment(0)

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.

Vosges answered 2/8, 2014 at 20:8 Comment(4)

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!! – Lolland 5/3, 2015 at 3: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'); }

– Lolland 5/3, 2015 at 3:52

Confirming this is the solution that works for Rails 4.2.1 as well. – Dextran 28/3, 2015 at 0: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. – Margretmargreta 11/5, 2015 at 3:43

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

Saturniid answered 10/3, 2016 at 20:48 Comment(0)

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)

Photoelectrotype answered 20/6, 2014 at 6:56 Comment(0)

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

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

Festive answered 9/7, 2015 at 16:25 Comment(0)

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

Moral answered 13/8, 2015 at 18:10 Comment(0)

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.

Postrider answered 6/9, 2015 at 22:52 Comment(0)

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.

Bo answered 7/5, 2015 at 13:2 Comment(0)

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.

Reardon answered 31/10, 2015 at 0:5 Comment(0)

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.

Fredette answered 15/8, 2014 at 2:42 Comment(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';

Flitch answered 25/10, 2014 at 1:54 Comment(0)

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.

Fern answered 6/6, 2016 at 5:44 Comment(0)

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

Straiten answered 14/6, 2016 at 10:18 Comment(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.

Crenation answered 22/8, 2016 at 12:40 Comment(1)

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. – Oba 11/9, 2017 at 9:38

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

Drown answered 21/9, 2016 at 4:23 Comment(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.

Fanestil answered 20/11, 2016 at 22:19 Comment(0)

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.

Tove answered 11/6, 2020 at 3:40 Comment(0)

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

Dewy answered 2/11, 2022 at 17:1 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Problem Definition

Solution

Recommended topics

Hot tags