Question

这是一个如此愚蠢的问题，但无论如何我们都去了。这是我的基本结构

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

所以Content和img都在我的根目录中，所以为了引用我的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的问题现在已经出来了，所以结构可能不同和/或不相关，还没有看过它。但是如果你到了这里，请记住这是3.0之前的Bootstrap。

我开始做的一件事就是这样，所以我真的不必弄乱任何东西就是将整个bootstrap文件夹带入项目，而不仅仅是css / js / img文件夹。我通常将它放在我的根脚本文件夹中，其结构如下：

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

这可能会破坏一些约定，因为'scripts'文件夹应该只包含脚本。我证明它是正确的，因为我使用脚本文件夹（惊喜！）和第三方库（因此libs文件夹）。你得到的大多数第三方组件至少都有js和css文件，我只是懒得把它们手动分开，因为一些库（比如bootstrap）依赖于其他文件所在的位置。

无论如何，我的两分钱，如果你想改变档案位置，请看看下面的答案。所有伟大的提示，谢谢SO人！

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 是否存在于您所说的路径上并具有足够的权限。

Answer 2

试试这个

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

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

请告诉我这是否适合您。

Answer 3

我遇到了同样的问题，它与您的字形的来源或位置无关。这是种族问题。遗憾的是我无法告诉你它在表格中表现如此的原因......但是我知道在我的dataTables中这是出现的，我的方法是在页面和表格加载之后通过附加html来添加glyphicons。它不完美，但它有效。

Answer 4

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

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

Answer 5

复制glyphicons-halflings.png＆amp; glyphicons-halflings-white.png来自img Folder。
在css文件夹中创建名为“img”的子文件夹。
粘贴两个glyphicons-halflings.png＆amp; glyphicons-halflings-white.png在css-＆gt; img文件夹中。
打开引导程序样式表，例如我们在文本编辑器中说一下bootstrap.css。

查找（Ctrl + F）“图标”。你会找到上课的。

[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}

将背景图片网址更改为

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

找到“glyphicons-halflings-white.png”
也改变它的路径。和宾果！你在上面。

Answer 6

我今天遇到了同样的问题而且让我很困惑。正如Rishi所说，它应该有效，但事实并非如此。我三重检查了我的目录结构。然后我终于意识到它根本没有打到我的glyphicons文件。我删除了这个有问题的css行：

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

一切都很好！

请记住，如果您要包含font-awesome，那么它将查找字体文件而不是glyphicons文件。所以要么添加适当的字体，要么只使用普通的旧引导程序。

Answer 7

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

下载theme template或carousel template引导程序，您将在那里找到这些文件。

要知道将这些文件放在网络文件夹中的位置，只需运行Link Checker或Xenu's link sleuth，它就会显示放置这些文件的位置。

Twitter引导程序标志符号图标未加载

7 个答案: