使用本地Bootstrap版本时，Bootstrap Glyphicons无法呈现

Question

我在Django中使用Bootstrap，对于所有其他的Bootstrap类都能正常使用，但是像这样的图标类：class=“glyphicon glyphicon-download-alt”不能用。

右下角带错误的快照：

包含bootstrap.min.css文件的快照：

在检查元素时，它包含所有的图标字体，其快照如下所示 -

只有当我在HTML文件中链接http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css时才能正常使用；但是如果我从我的电脑中包含bootstrap.min.css文件，它就不工作了。否则，每个Bootstrap类都可以完美地使用。希望您能理解我的问题。谢谢。

- Rahul Satal

---

你的意思是从你的电脑中包含了什么吗？你是在本地构建吗？如果是，请在Chrome中测试页面，看看是否与Firefox中出现相同的错误。实际上，它不一定非得是Chrome，但至少要使用一个非Mozilla基础的浏览器。 - skribe

不，我已经从上面的链接下载并保存在我的电脑上了，对于所有的Bootstrap类都能完美运行。 - Rahul Satal

你也下载了glyphicons字体吗？ - user169600

不是的，请重新阅读我的回答。你复制的CSS只包含到字形图标的链接，而不是实际的字体本身。 - rnevius

它起作用了。多亏了你，非常感谢。 - Rahul Satal

Answer 1

不起作用是因为你保存了CDN链接的CSS文件。这样做行不通，因为字形图标与该CSS文件相关联。例如：

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
}

这意味着下载的Bootstrap文件正在寻找一个你电脑上没有的文件夹中的字体图标。你需要从官方下载链接正确地下载Bootstrap。官方下载包含一个实际包含字体图标文件的/fonts/目录。 或者，您可以将CDN文件中的所有字体路径更改为指向CDN上的字体的绝对链接...但这并不真正有意义。

- rnevius

---

我已经尝试过了，但它仍然不起作用。它的快照包含所有的Glyphicons文件。请帮忙。 - Rahul Satal

如果您下载官方压缩包，它将可以直接使用。唯一的例外是，如果您移动了某些文件而没有改变相对链接，它就无法正常工作。 - rnevius

实际上我正在使用Django，我只是将CSS文件复制到我的静态文件夹中，它可以为其他类工作。还请告诉我什么是CDN。谢谢。 - Rahul Satal

你可能还需要将 fonts 文件夹复制到你的静态文件夹中。 - user169600

谢谢，我已经寻找解决这个问题的方法很长时间了！ - Akshay Lokur

Answer 2

终于解决了我的问题。实际上，问题出在我们网站中使用Glyphicons时，比如在django中，我们还必须从bootstrap官方链接下载的bootstrap-3.3.2-dist文件夹中复制字体文件夹。

另一个问题是在哪里修复它。请参见此结构，其中字体与css文件相关，并将字体文件夹粘贴到其中。

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

但是在django中，我只需要放在静态文件夹中就可以了。

- Rahul Satal

---

我认为只需将bootstrap.min.css与dist中包含的文件替换即可解决问题。 - Mathieu