Bootstrap 3 Glyphicons 未正确显示答案

【问题标题】：Bootstrap 3 Glyphicons not showing correctlyBootstrap 3 Glyphicons 未正确显示
【发布时间】：2015-03-09 23:27:22
【问题描述】：

到目前为止，我在使用 bootstrap 时没有遇到太多问题，但是今晚我尝试将 glyphicons 集成到导航栏元素中，但无法让它工作。图像显示出现在字形位置的字符；它下面的代码。

<link href="/userpath/code/js/bootstrap-3.3.1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap theme -->
<link href="/userpath/code/js/bootstrap-3.3.1/dist/css/bootstrap-theme.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
 <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">name</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">  About Me</a></li>
      <li><a class="navbar-link" href="#"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>  Projects</a></li>
      <li><a href="#">  Past</a></li>
      <li><a href="#">  Free Time</a></li>
    </ul>
  </div>
</nav>

我首先像任何合理的人一样整理了 BS3 文档并找到了这个。

仅用于空元素：图标类只能用于不包含文本内容且没有子元素的元素。

对此并没有 100% 满意，我发现了一些在按钮对象中显示图标的示例。一个演示是here。这让我相信我的问题超出了与 BS3 的兼容性。我继续寻找，发现这个helpful post 说要重新下载字体文件的源代码。尝试此操作后问题仍然存在。我还仔细检查了我的 bootstrap.min.css 格式是否正确。对于那些可能仍然认为这是导航栏问题的人，我尝试实现演示中看到的按钮，但遇到了同样的问题。

我是否需要明确格式化 .css 中的字形图标？根据我的阅读，我拥有正常工作所需的一切。请让我知道我做错了什么。

对于那些关心的人，我在 Mac Book Pro OSX 10.9.5 上使用 Mozilla 34.0.5（操作系统并不重要）。

更新

我尝试了 Shikar 的建议，但无法让它们发挥作用。当我查看我的 bootstrap.min.css 时，我看到了 src:url(../fonts/glyphicons...)。我做了两次尝试来更改这些网址。第一个我只是删除了/fonts/之前的..。这没有任何改变。然后我意识到我已经将我的引导程序放在一个单独的目录中，所以我通过将 `/Users/myname/explicitPath/bootstrap-3.3.1/dist/fonts/glyphicons-halflings-regular.eot) 与.css 的这个区域中提到的其他四个 glyphicon url。这也没有奏效。听从@rockerest 的建议，我查看了 FF 的 webdev 工具，发现两个使用可下载字体的下载失败。这些错误的文件路径没有任何错误，但我是否误解了如何在本地使用引导程序？我不能在 bootstrap.min.css 中使用本地文件路径吗？

【问题讨论】：

你确定字体已经加载了吗？
是否有失败的网络请求？这种行为通常意味着字体文件加载失败并且 CSS 正在创建一个无法解释的 unicode 字符。
然而，它在 --> FIDDLE
查看@Shikhar Bhardwaj 的回复后，看起来这很可能是问题所在。我会在几个小时内尝试一下，看看是否有效。当时，我没有将此问题与浏览器问题联系起来，只是认为我的方法有问题。
尝试了@Shikhar 的解决方案，但没有奏效。检查更新。

标签： javascript html css twitter-bootstrap glyphicons

【解决方案1】：

所以我的问题最终出现在引导程序与我的 index.html 相关的位置。下面是之前和之后的文件结构。我希望只有一个通用的引导文件夹，我可以指向开发多个 Web 应用程序创意的文件，但看起来引导带需要与您的 index.html 处于同一级别。通过将 bootstrap 移动到与 index.html 相同的目录，在 bootstrap 目录中执行 grunt dist 并在 .html 引用中使用 bootstrap.min.css 的显式路径，我能够让事情正常工作。希望我能更好地理解为什么这会奏效。

Before                    After
├── webpage/              └── webpage/
|   └──index.html             ├──index.html
|                             └──bootstrap/
└── js/
    └──bootstrap/

【讨论】：

【解决方案2】：

有一个类似的问题，解决了它把字体目录放在 css 文件夹所在的同一目录中。例如，如果 css 文件夹放在根目录中，则将 fonts 文件夹放在根目录中。

【讨论】：