php - Bootstrap 3 字形图标在我放大和缩小之前不显示

Question

由于某种原因，glyphicons 无法在我的 Chrome 或 Firefox 上正确加载，但它们似乎在 IE 上工作得很好(没有测试太多次，也许只是幸运)。

在我放大/缩小之前，字形图标不会显示在我的页面上。即使放大或缩小 10%，它们也会出现，当我恢复到正常尺寸 (100%) 时，它们仍然存在。但是，首次加载页面时我看不到它们。

我正在从 Bootstrap 页面测试以下模板:

http://getbootstrap.com/examples/carousel/

我所做的只是将 140x140 的标题图像替换为字形，并使用如下简单的示例代码将它们的大小调整为 90 像素:

span.glyphicon-globe {
font-size: 80px;
color: #EA8A46;
}

下面是我如何使用它们:

<div class="col-lg-4">
  <span class="glyphicon glyphicon-star-empty"></span>
  <h2>Test</h2>
  <p>Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  <p><a class="btn btn-warning" href="#" role="button">więcej &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
  <span class="glyphicon glyphicon-calendar"></span>
  <h2>Test 2</h2>
  <p>Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  <p><a class="btn btn-warning" href="#" role="button">więcej &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
  <span class="glyphicon glyphicon-check"></span>
  <h2>Test 3</h2>
  <p>Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  <p><a class="btn btn-warning" href="#" role="button">więcej &raquo;</a></p>
</div><!-- /.col-lg-4 -->

模板上有这样的注释:

注意:如果您通过 file://URL 查看此页面，由于网络浏览器安全规则，左侧和右侧的“下一个”和“上一个”Glyphicon 按钮可能无法正确加载/显示.

但是我没有将它与 file:// 一起使用。问题出在本地主机和实时服务器上。我没有在 Bootstrap 页面上使用自定义程序，字体来自标准 .zip 文件。

如果您需要更多代码，我很乐意提供。

编辑: 刚刚对 IE 和 Firefox 的新安装进行了更多测试，一切正常。难道只是 Chrome 吗？

Answer 1

检查字体是否被正确引用。这是通过 Bootstrap 上的自定义下载选项下载时注意到的一个问题。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

如果不行，你也可以试试cdn。 Fiddle