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

Posted 2023-03-15

技术标签:

【中文标题】Bootstrap 3+Rails 4 - 某些 Glyphicons 不工作【英文标题】：Bootstrap 3+Rails 4 - Certain Glyphicons not working 【发布时间】：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"):

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

谢谢！

【问题讨论】：

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

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

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

*= require bootstrap

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

//= require bootstrap

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

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

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

rake assets:precompile RAILS_ENV=development

通过将@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 时遇到同样的问题。

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

这些步骤奏效了：

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

将此添加到 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', '~> 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);

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

【讨论】：

以上是关于Bootstrap 3+Rails 4 - 某些 Glyphicons 不工作的主要内容，如果未能解决你的问题，请参考以下文章

rails 4 bootstrap 3 ajax模式

在 CSS 中使用 glyphicon 作为背景图像：rails 4 + bootstrap 3

使用 Webpack 在 Rails 6 上设置 Bootstrap 4.3

带有引导程序 3.3.4 的字形图标在 rails 4.2.1 中不起作用

带有 Turbolinks 的 Rails Bootstrap 4

Rails 5 - 如何删除 twitter-bootstrap-rails gem 并手动安装