如何在Twitter Bootstrap中启用Glyphicons？

Question

我有本地存储的Bootstrap文件：

<link rel="stylesheet" href="/bootstrap/3.2.0/css/bootstrap.min.css">

并且

<script src="/bootstrap/3.2.0/js/bootstrap.min.js"></script>

但当我执行这个操作时：

<span class="glyphicon glyphicon-print" aria-hidden="true"></span>

当客户端没有正确的字体时，我会得到一个小方块字符。我在这里读到有单独的CSS文件，但链接已经失效了。你有任何想法如何解决这个问题吗？

- Jonathan M

---

Glyphicons 包含在默认的 bootstrap.min.css 中 - 确保您没有使用插件，如 NoScript，可能会阻止加载外部字体文件。 - knittl

@knittl，我是否还需要下载字体文件？我已经将文件存储在本地了。 - Jonathan M

@JonathanM 是的，您需要下载字体文件。 - RevanProdigalKnight

希望你没有包含必要的字体。 - Butterfly

@JonathanM：是的，你需要本地文件。你最初的问题使用了来自maxcdn的css，它会知道在哪里找到所需的字体文件。 - knittl

Answer 1

找到了：

需要在本地创建：

/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.eot
/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.woff
/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.ttf
/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.svg

这些字体文件来源于这里：

http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.eot http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.woff http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.ttf http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.svg

- Jonathan M

---

如果你访问http://getbootstrap.com/getting-started/#download并点击“Download Bootstrap”，它会带有一个包含“css，fonts，js”的文件夹。你不应该从CDN下载每个文件，这对我来说有点反向。 - Tim Lewis

@Tim，是的，我想当初下载时我忽略了/fonts文件夹。我肯定是反着来的。 - Jonathan M

很容易错过。在了解字形图标之前，我已经熟悉Font Awesome，所以我知道它们在技术上是一种字体，但我可以理解为什么会被忽视。不过很高兴你最终让它工作了！ - Tim Lewis

Answer 2

在bootstrap下载文件中，您应该有以下文件结构（除非您选择不下载glyphicons作为组件）：

css -> bootstrap.css、bootstrap.css.map、bootstrap.min.css、bootstrap-theme.css、bootstrap-theme.css.map、bootstrap-theme.min.css
fonts -> glyphicons-halflings-regular.eot、glyphicons-halflings-regular.svg、glyphicons-halflings-regular.ttf、glyphicons-halflings-regular.woff、glyphicons-halflings-regular.woff2
js -> bootstrap.js、bootstrap.min.js、npm.js

如果您没有这个文件，请前往http://getbootstrap.com/getting-started/#download下载软件包。将其链接到您自己的文件夹中很容易。只需将Bootstrap CSS文件夹重命名为“Bootstrap”，然后将其拖到文件中的CSS文件夹中（您也可以直接取文件，但是将文件夹命名为CSS/Bootstrap/bootstrapCSSfiles会使它更加有组织）。对于JS和Fonts，再次执行此操作即可完成设置。

祝你好运:D

- Kevin Leegsma

Answer 3

它没有任何问题。

<span class="glyphicon glyphicon-print" aria-hidden="true"></span>

http://jsfiddle.net/3v1tyL61/

- naoxink

---

抱歉，我发布了错误的信息。修改了问题。我已经将bs文件存储在本地。我还需要有一个字体文件夹吗？ - Jonathan M

@MacKentoch，我需要下载字体吗？ - Jonathan M

啊，我想我找到了。我漏掉了：/fonts/glyphicons-halflings-regular.eot 从这里下载原始文件：http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.eot - Jonathan M