Bootstrap 3+Rails 4 - 某些 Glyphicons 不工作

【问题标题】：Bootstrap 3+Rails 4 - Certain Glyphicons not workingBootstrap 3+Rails 4 - 某些 Glyphicons 不工作
【发布时间】：2014-03-24 15:22:40
【问题描述】：

我正在尝试在我的 rails 4 应用程序中使用 bootstrap 3。按照this 教程使用来自this github 页面的bootstrap saas 设置bootstrap 3。

Bootstrap 工作正常，但字形图标没有按预期工作。

某些字形图标根本不显示。例如我厌倦了在我的 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>

图标呈现为this

根本不呈现软盘图标（显示无效字符） 加号和减号不是粗体，而且比 bootstap 网站上显示的要小得多。

我还在 rails 控制台上看到以下消息。

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"):

非常感谢您对此问题的意见。

谢谢！

【问题讨论】：

  • 你看过这个帖子吗：stackoverflow.com/questions/18369036/… ?
  • 我确实检查了这一点，并尝试从他的引导站点复制字体文件，但这也没有帮助。由于我使用的是 sass bootstrap，你能告诉我“@font_face..”的更新是否适用于我吗？如果是，我应该更新哪个文件。谢谢！
  • 你在哪里复制字体目录？当您在浏览器中访问 /fonts/glyphicons-halflings-regular.woff 时会发生什么？

标签： ruby-on-rails-4 twitter-bootstrap-3 twitter-bootstrap-rails


【解决方案1】：

我遇到了同样的问题并找到了解决方案。完全归功于Eric Minkel，他写了一篇关于该主题的详细博客文章。我强烈建议您阅读它以进一步推理。

  1. 编辑app/assets/stylesheets/application.css，添加：

    *= require bootstrap

  2. 编辑app/assets/javascripts/application.js，添加：

    //= require bootstrap

  3. 在config/application.rb 中，在class Application &lt; Rails::Application 之后添加以下内容。它应该是这样的：

    class Application < Rails::Application
    config.assets.paths << "#{Rails}/vendor/assets/fonts"

  4. 在终端中，运行以下命令编译您的资产：

    rake assets:precompile RAILS_ENV=development

  5. 通过将@font-face 资源位置从../fonts/ 更改为/assets/ 来编辑bootstrap.css 文件。它应该是这样的：

    @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 重新启动，字形图标就会出现。

【讨论】：

  • 遇到了同样的问题，一些字体丢失了。第 4 步为我修复了它。谢谢。
  • 谢谢，解决了...正在使用css.min，所以我解压并做了修改步骤5
  • 除此之外，我还必须将 config.assets.precompile += %w( *.svg *.eot *.woff *.ttf ) 添加到我的 application.rb 以让预编译器查看字体文件。
  • 别忘了在 vendor/assets 中创建字体文件夹并将字体复制到其中。字体在 bootstrap 站点的 bootstrap.zip 中可用。
  • rake assets:precompile RAILS_ENV=development 是我所需要的。这个答案真的不应该在底部。
【解决方案2】：

只需使用：

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

在您的 SCSS 或 SASS 文件中。 图像和字体修复需要“bootstrap-sprockets”。

你已经有机会了：

@import "bootstrap";

在 application.scss 中声明。

【讨论】：

  • 这里也一样。更新了我的 gem，但在我这样做之前，一切都没有工作。
  • 我的 application.css.scss 文件中已经有了这些导入，但我仍然得到方形框而不是 glyphicons ：/
  • 重要，订单很重要。
【解决方案3】：

我遇到了同样的问题。通过添加解决：

@import "bootstrap-sprockets";

在现有线之上：

@import 'bootstrap';

在我的 /app/stylesheets/bootstrap_and_customisation.css.scss 文件中

【讨论】：

    【解决方案4】：

    我遇到了同样的问题。引导程序中的字体路径有问题。幸运的是，这是一个相当简单的修复：

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

    这为我解决了问题。应该在导入 bootstrap-sass 之前进行。您可能需要在此处更改值。

    【讨论】：

    • 也适用于我的 rails 4.1。我在两个开发环境中都进行了测试（并删除了我的整个 public/assets 文件夹）——它有效。然后我切换到需要在 environment/development.rb config.assets.debug = false; config.assets.compile = false; config.assets.digest = true 和 $ rake assets:precompile 中预编译的资产，并且可以看到带有字体的 public/assets/bootstrap。重新启动rails，它也可以工作。非常感谢！！
    • 我的完整字体包含在 application.scss 中是@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'); }
    • 确认这是适用于 Rails 4.2.1 的解决方案。
    • 不，这不适用于 Rails 4.2.1。至少这里没有，至少没有“glyphicon-log-book”图标。它仍然是不可见的。
    【解决方案5】：

    对此进行更新。我遇到了同样的问题，并完成了 Oddurs 的 #1 答案提供的步骤。由于某种原因，这对我不起作用。然后我意识到这与我的公共文件夹中的文件结构有关（不知道为什么我的不一样）。

    基本上我通过在“/assets”之后添加“/bootstrap”来让它工作，因为我所有的字形图标都在我默认相信的“/bootstrap”文件夹中

    所以不要这样：

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

    我这样做了：

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

    在 application.css 中。希望对某人有所帮助

    【讨论】：

      【解决方案6】：

      另一种解决方案是将字体文件夹复制到公共文件夹中，以便您拥有

      public/fonts/glylpicons-.....

      同样的解决方案也适用于 font-awesome 等。 唯一的缺点是如果您经常更改字体文件:o)

      【讨论】：

        【解决方案7】：

        如果您使用的是 bootstrap-sass-official，请在导入 bootstrap 之前添加：

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

        【讨论】：

          【解决方案8】：

          对我来说，这是 bootstrap-sass 和 sass 之间版本不兼容的问题。

          如果您检查生成的 application.css，您会看到 @font-face 被包裹在 @at-root 中，这是我使用的 sass 版本不支持的新 sass 声明。

          我已将 sass-rails 升级到 5.0.3，将 sass 升级到 3.4.16，并且可以正常工作（sass 至少需要 3.3）。

          【讨论】：

            【解决方案9】：

            我遇到了类似的问题，发现正在提供旧版本的引导资产。感谢这篇文章：Rails with Twitter Bootstrap: still serving an old asset 我刚刚跑了rake tmp:clear，之后就开始工作了。

            【讨论】：

              【解决方案10】：

              我正在使用 twitter-bootstrap-rails，错误信息是 /assets/twitter/fonts/...

              原因是 twitter-bootstrap-rails gem 的供应商目录中不包含 Glyphicons 资源。我已经尝试了上述所有解决方案，但都没有奏效。

              我的最终解决方案是从 bootstrap 官方网站下载 zip 文件，解压缩，将丢失的文件移动到 public/assets/twitter/fonts 目录。它适用于我的开发环境。

              【讨论】：

                【解决方案11】：

                确保您的gemfile 是最新的并且vendor/cache 是清晰的。

                我的问题是由于 gem 的奇怪版本，所以我运行 bundle update 刷新了 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!

                一旦我这样做了，为了更好地衡量，我也清除了其他缓存 rake assets:clobber 并重新编译了资产 RAILS_ENV=production rake assets:precompile。

                然后我重新启动了 nginx ../bin/restart 和魔法.... 在桌面上的 Firefox 和 iPad 上的相机中出现了字形而不是奇怪的方形东西。全部代替 man glyphicon。

                【讨论】：

                  【解决方案12】：

                  升级到 Rails 4.1.4、bootstrap-sass 3.2.0 时遇到同样的问题。

                  上面的提示很好，但没有一个对我有用。

                  这些步骤奏效了：

                  1. 将字体文件复制到 RAILS_ROOT/vendor/assets/fonts/bootstrap/（您可能需要创建目录）

                  2. 将此添加到 config/application.rb

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

                  不需要任何特殊指令或 sass 变量重新定义。

                  【讨论】：

                    【解决方案13】：

                    我在查看时遇到问题：

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

                    在我的开发环境中。以下调整有效。

                    在您的 css.scss 文件中添加：

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

                    【讨论】：

                      【解决方案14】：

                      如果您厌倦了 bootstrap-sass 或 twitter-bootstrap-rails 的魔力，或者如果您想继续使用特定版本的 bootstrap，您可以手动执行以下操作：

                      • 从http://getbootstrap.com/ 下载引导程序，将文件放在#{Rails.root}/vendor/assets/javascripts 中

                      • 在文件app/assets/javascripts/application.js中，写//= require 'bootstrap-3.3.6-dist/js/bootstrap.min'

                      • 在文件app/assets/stylesheets/application.css中，写*= require 'bootstrap-3.3.6-dist/css/bootstrap.min'

                      • 将这样的脚本放在您的 {Rails.root}/bin 中，并将其配置为在部署到生产环境时由 capistrano 运行：

                      #!/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
                      • 在您的生产机器上配置 nginx 以提供 public/images 和 public/fonts。
                              location ~ ^/(assets|images|fonts)/(.*)$ {
            alias /var/www/my_app/current/public/$1/$2;
            gzip on;
            expires max;
            add_header Cache-Control public;
        }

                      从现在开始，你每次说cap production deploy，所有手动的事情都会处理。

                      【讨论】：

                        【解决方案15】：

                        您可以将所有引导字体文件复制到 public/fonts 并且它将起作用

                        【讨论】：

                          【解决方案16】：

                          使用rails 4.2.6

                          我不得不编辑config/application.rb

                          我添加了这一行

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

                          现在字体被相对于relative_url_root 值引用。

                          【讨论】：

                          • 我做了类似的事情并在环境文件 (app/environments/production.rb) 中设置了 config.relative_url_root 并解决了我的问题。我们在环境级别对此进行控制，因为我们的生产/uat 环境需要相对路径，但开发和测试不需要。
                          【解决方案17】：

                          将以下内容添加到 application.scss 在 Rails 5 上对我有用（在从同一文件中取消注释 @import "bootstrap/glyphicons";[使用 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】：

                            我正在使用 angular-ui-bootstrap-rails gem

                            gem 'angular-ui-bootstrap-rails'

                            我下载了bootstrap并将字体文件夹粘贴到app/assets文件夹下

                            然后重启 Rails 服务器。

                            【讨论】：

                              【解决方案19】：

                              就我而言：我们计划将旧版应用程序从 Rails 3.2 升级到 Rails 4.0。突然间，字形图标没有出现。我们使用的是gem 'bootstrap-sass', '~&gt; 3.0.3.0'，所以无法升级到最新的3.4

                              问题定义

                              主要原因似乎是文件http://localhost:3000/assets/bootstrap/application.self.css?body=1中未解决的sass函数调用twbs-font-path("

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

                              应该是这样的

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

                              解决方案

                              Rails 的新安装指南似乎是

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

                              但问题是文件bootstrap-sprockets 未在我使用的版本中定义。所以我必须从 GitHub 复制文件的内容并在我的代码库中创建它。

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

                              它解决了这个问题。 希望对你也有帮助。

                              【讨论】：

                                猜你喜欢
                                • 1970-01-01
                                • 2013-12-13
                                • 1970-01-01
                                • 2014-06-10
                                • 2014-10-17
                                • 2020-01-07
                                • 1970-01-01
                                • 2017-09-16
                                • 2014-06-08
                                相关资源
                                最近更新 更多
                                热门标签
                                Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode