Glyphicons在开发环境中不会出现Rails 4.2和Bootstrap 3.3.3

Question

当我用正确的代码加载主页时,我看不到字形.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Star
</button>
<i class="glyphicon glyphicon-search"></i>
<a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>

我有字体/app/assets/fonts/bootstrap.

在applications.js文件中:

//= require bootstrap-sprockets 
//= require bootstrap

在application.css.scss文件中:

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

在Gemfile文件中:

gem 'bootstrap-sass', '~> 3.3.3'
gem 'sprockets-rails'
gem 'sass-rails', '~> 5.0'

在_glyphicons.scss文件中:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}

并在_variables.scss文件中:

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

//** File name for all font files.
$icon-font-name:          "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id:        "glyphicons_halflingsregular" !default;

Answer 1

嗯...我不确定你是否解决了你的问题。但我以前遇到过同样的问题，而且它不是基于代码的，你的代码看起来应该可以正常工作。

问题可能出在您的浏览器安全设置上。例如，如果您使用Internet Explorer，它可能处于某种安全状态，这限制了字体的下载，并且 Glyphicons 被视为字体。

因此，请转到“Internet 选项”菜单的“安全”选项卡并启用字体下载。

不幸的是，总会有一小部分人启用了此类安全设置，并且永远不会看到字形，因此它们应始终与纯文本一起使用，而不是独立使用。