Bootstrap 3 + Rails 4-某些Glyphicons不起作用 [英] Bootstrap 3+Rails 4 - Certain Glyphicons not working

问题描述

我正在尝试在我的Rails 4应用程序中使用bootstrap 3.遵循了本教程，使用来自

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正常运行，但是字形图标无法按预期运行.

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

某些字形图标根本不显示.例如我累了要在我的application.html.erb中显示其中一些内容进行测试:

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

我还在Rails控制台上看到以下消息.

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.

谢谢！

推荐答案

我遇到了同样的问题，并找到了解决方案.完整的版权归 Eric Minkel ，他撰写了有关该主题的详细博客文章.我强烈建议您阅读以作进一步的推理.

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. 通过添加以下内容来编辑app/assets/stylesheets/application.css:

*= require bootstrap

通过添加以下内容来编辑app/assets/javascripts/application.js:

//= require bootstrap

在config/application.rb中，在class Application < Rails::Application之后添加以下内容.看起来应该像这样:

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

通过将@font-face资源位置从../fonts/更改为/assets/，编辑bootstrap.css文件.看起来应该像这样:

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

您完成了.只需使用rails s重新启动，字形图标就会出现.

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

这篇关于Bootstrap 3 + Rails 4-某些Glyphicons不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！