1. 技术文章
  2. Bootstrap 3+Rails 4 - Certain Glyphicons not working

Bootstrap 3+Rails 4 - Certain Glyphicons not working

由 自古美人都是妖i 提交于 2019-11-26 05:27:03

问题


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!


回答1:


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.

  1. Edit app/assets/stylesheets/application.css by adding:

    *= require bootstrap

  2. Edit app/assets/javascripts/application.js by adding:

    //= require bootstrap

  3. 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"

  4. In the terminal, compile your assets by running:

    rake assets:precompile RAILS_ENV=development

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




回答2:


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.




回答3:


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




回答4:


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.




回答5:


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




回答6:


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)




回答7:


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

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




回答8:


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




回答9:


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.




回答10:


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.




回答11:


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.




回答12:


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:

  1. Copy font files to RAILS_ROOT/vendor/assets/fonts/bootstrap/ (you probably need to create the directory)

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




回答13:


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



回答14:


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.




回答15:


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




回答16:


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.




回答17:


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



回答18:


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.



来源：https://stackoverflow.com/questions/21962775/bootstrap-3rails-4-certain-glyphicons-not-working

标签
ruby-on-rails-4
twitter-bootstrap-3
twitter-bootstrap-rails
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!