Bootstrap 3 个字形显示不正确

Question

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

<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. This led me to believe that my problem went beyond compatibility with BS3. I continued looking and found this helpful post 说要重新下载字体文件的源代码。尝试此操作后问题仍然存在。我还仔细检查了我的 bootstrap.min.css 格式是否正确。对于那些可能仍然认为这是导航栏问题的人，我尝试实现演示中看到的按钮，但遇到了同样的问题。

我是否需要明确格式化 .css 中的字形？从我读过的内容来看，我拥有正常工作所需的一切。请让我知道我做错了什么。

对于那些关心的人，我在 Mac Book Pro OSX 10.9.5 上使用 Mozilla 34.0.5（不是 OS 应该重要）。

更新

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

Answer 1

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

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

Answer 2

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

Bootstrap 3 个字形显示不正确

Bootstrap 3 Glyphicons not showing correctly

html

javascript

css

twitter-bootstrap

glyphicons