Twitter Bootstrap字形图标没有加载

Question

这个问题很蠢，但我们还是来解决一下。这是我的基本结构：

/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png

我的内容和图片都在根目录中，所以从bootstrap.css文件中引用字形图像时，我这样写：

background-image: url("../../img/glyphicons-halflings.png");

为什么你不显示？

我需要检查一个.js文件，以确保它正在查找正确的目录吗？

哦，这里是我试图渲染图像的片段：

 <td>
                @if (item.Something == true)
                {
                    <i class="icon-ok"></i>
                }
                else
                {
                    <i class="icon-remove"></i>
                }
            </td>

更新

这个问题有很多的浏览量，所以我想分享我的看法。需要注意的是，自从发布这个问题后，BS 3.0已经发布了，因此结构可能不同和/或不相关，但我还没有看过它。但如果你来到这里，请记住这是Bootstrap 3.0之前的版本。

我开始做的一件事情是将整个bootstrap文件夹带入项目中，而不仅仅是css/js/img文件夹。我通常将它放在根目录下的scripts文件夹中，并按以下结构进行组织：

/scripts
     /libs
          /boostrap <-- the unzipped folder you get when downloading
              /js
              /css
              /img

这可能会打破一些惯例，因为一个“scripts”文件夹真的应该只保存脚本。我解释一下，由于我在“scripts”文件夹中使用脚本（惊喜！）和第三方库（因此有“libs”文件夹）。大多数你获取的第三方组件都至少有js和css文件，我只是变得太懒了，不想手动分离它们，因为一些库（如bootstrap）依赖其他文件的位置。

无论如何，这是我的两分钱，如果您想改变文件位置，请查看下面的答案。所有的技巧都很好，谢谢stackoverflow的人们！

- ledgeJumper

Answer 1

您当前的代码在技术上应该可以正常工作，不需要任何js文件。

background-image: url("../../img/glyphicons-halflings.png");对于像这样的目录结构来说是完全合适的。

/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png

您可以尝试下面的代码来确保一切正常...

<td><i class="icon-ok"></i></td>

如果这样还是失败了，那么请仔细检查您指定路径下是否存在glyphicons-halflings.png，并且有足够的权限。

- 000

---

是的，我在表格中另一个位置也有完全相同的代码：<th><i class="icon-hand-down"></i></th>，但仍然没有任何反应。这是一个非常奇怪的问题。 - ledgeJumper

在Chrome中打开页面，在应该显示字形的位置上右键单击，然后单击“检查元素”。这将带出Chrome的开发人员工具...在“元素”选项卡中找到您的<i class="icon-ok">，然后单击它以显示适用于该元素的CSS规则。其中一个规则将是指向glyphicons-haflings.png的路径。右键单击该路径，并在新标签页中打开。当图像未显示时，请查看URL路径并确定需要对CSS规则进行哪些调整。 - Jeromy French

@JeromyFrench，按照您说的我正在检查，但是我甚至没有在其中看到任何背景CSS规则。 - ledgeJumper

嗯...让我们退后一步。在浏览器中打开CSS文件，搜索“glyphicons”，以确保它们正在生成CSS。如果是的话，搜索“icon-ok”。 - Jeromy French

对于那些使用Rails和LESS的人，我建议把图片放在[APP_ROOT]/vendor/assets/images/bootstrap目录中。这样一来，您可以让资产管道查找它们，而不是硬编码它们的URL。所以，您需要：1)将bootstrap.css文件重命名为bootstrap.css.less 2)更新两行引用glyphicons图像的代码，例如。background-image: url("../img/glyphicons-halflings.png"); 变成 background-image: asset-url("glyphicons-halflings.png"); 3) 对于bootstrap.min.css重复步骤（1）和（2）。 - schmielson

Answer 2

今天我遇到了同样的问题，让我感到困惑。正如Rishi在上面所说，它应该可以工作，但实际上并没有。我三次检查了我的目录结构。最终我意识到它根本没有命中我的glyphicons文件。我删除了这个有问题的CSS行：

<link href="css/font-awesome.min.css" rel="stylesheet"> <!-- remove me -->

一切都很好！

记住，如果您要包括 font-awesome，则它将寻找字体文件而不是 glyphicons 文件。因此，要么添加适当的字体，要么只使用传统的 bootstrap。

- Dave

Answer 3

这可能是一篇旧帖子，但我希望它能帮助其他人寻找解决此问题的答案。

我下载的文件名包含下划线，但CSS正在寻找一个在glyphicons和halflings之间有破折号的文件。更改其中一个并确保将其上传到服务器上的正确文件夹中。

- Darnuhulu

Answer 4

只有在字体文件夹中有以下文件时，字形图标才会加载。 glyphicons-halflings-regular.eot、glyphicons-halflings-regular.svg、glyphicons-halflings-regular.ttf 和 glyphicons-halflings-regular.woff。

下载 Bootstrap 的 主题模板 或 轮播模板，你会在那里找到这些文件。

要知道在 Web 文件夹中放置这些文件的位置，只需运行 Link Checker 或 Xenu's link sleuth，它会告诉你应该把这些文件放在哪里。

- Nav

Answer 5

从img文件夹中复制glyphicons-halflings.png和glyphicons-halflings-white.png。 在css文件夹中创建名为“img”的子文件夹。 将glyphicons-halflings.png和glyphicons-halflings-white.png都粘贴到css->img文件夹中。 在文本编辑器中打开您的Bootstrap样式表，例如bootstrap.css。 查找（Ctrl + F）“icon”。 您会找到该类。 更改背景图像URL以便background-image: url（“img / glyphicons-halflings.png”）; 找到“glyphicons-halflings-white.png”。 也更改它的路径。 Bingo！ 你成功了。

- JackLB

Answer 6

我遇到了同样的问题，这与您的glyphicons的来源或位置无关。这是一个竞争问题。不幸的是，我不能告诉您为什么它在表格中表现出这样的行为......但我知道在我的dataTables中发生了这种情况，我解决的方法是在页面和表格加载后通过添加HTML来添加glyphicons。这不是完美的，但它可以工作。

- silvster27

Answer 7

试一下

background-image: url("/img/glyphicons-halflings.png");

我将路径从相对路径改为绝对路径。通过在路径开头添加斜杠，它将从您的站点根目录开始。

如果可以，请告诉我是否有效。

- Zack

---

以正斜杠开头表示根目录。 - Rajiv Pingale

为什么要踩我呢？在我看来，这是一个可行的建议。 - ledgeJumper

我有另一个问题。除了那一行之外，你的css文件里还有其他东西吗？我只是想知道，因为在构建网站时，如果我没有正确地从html页面链接到css文件，我就会遇到问题。 - Zack

@davidisawesome 在阅读了Rajiv Pingale的回答后，我查找了他的意思，因为他没有解释得很透彻。我在这个SO问题上找到了答案。 - Zack

我还更新了我的答案，使用了那个问题的答案中的信息。 - Zack