Bootstrap 3字形圖標直到我放大和縮小才顯示

Question

由於一個或另一個原因，字形圖標無法在我的Chrome或Firefox上正確加載，但是似乎它們在IE上可以正常工作（未經過多測試，也許很幸運）。

在我放大/縮小之前，字形圖標不會顯示在我的頁面上。 即使放大或縮小10％也會使它們出現，而當我恢復到正常大小（100％）時，它們仍然存在。 但是，第一次加載頁面時看不到它們。

我從Bootstrap頁面測試以下模板：

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

我所做的就是用glyphicons替換了140x140標題圖片，並使用如下示例代碼將它們的大小調整為90 px：

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

在模板上有這樣的注釋：

Note: If you're viewing this page via a file:// URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.

但是我沒有將它與file:// 。 問題在本地主機和實時服務器上。 我沒有在引導程序頁面上使用定制程序，字體來自標准的.zip文件。

如果您需要更多代碼，我會很樂意提供。

編輯：只是使用IE和Firefox的新安裝進行了更多測試，並且一切正常。 可能只是Chrome嗎？

Answer 1

檢查是否正確引用了字體。 通過引導程序上的自定義下載選項進行下載時，會注意到此問題。

@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。 小提琴