Bootstrap 3 Glyphicons没有正确显示

Question

到目前为止，我没有遇到太多关于引导程序的问题，但是今晚我尝试将字形集合在一个navbar元素中并且无法让它工作。图像显示出现在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中的glyphicons？从我所读到的，我有我需要的一切才能正常工作。请让我知道我做错了什么。

对于那些关心的人，我在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网址。这也行不通。根据@rockerest的建议，我查看了FF的webdev工具，看到两个下载失败的可下载字体。这些错误的文件路径没有任何错误，但我误解了如何在本地使用bootstrap？我可以在bootstrap.min.css中使用本地文件路径吗？

Answer 1

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

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

Answer 2

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