5

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

/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。

我已经开始做的一件事是让我不必搞砸任何事情，就是将整个引导文件夹带入项目，而不仅仅是 css/js/img 文件夹。我通常将它放在我的根脚本文件夹中，其结构如下：

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

这可能会打破一些约定，因为“脚本”文件夹实际上应该只保存脚本。我证明它是合理的，因为我将脚本文件夹用于脚本（惊喜！）和第三方库（因此是 libs 文件夹）。你得到的大多数第三方组件至少有 js 和 css 文件，我只是懒得手动分离它们，因为一些库（如引导程序）依赖于其他文件的位置。

无论如何，我的两分钱，如果您想更改文件位置，请查看下面的答案。所有很棒的提示，谢谢大家！

4

7 回答 7

3

您当前的代码在技术上应该可以工作，并且不需要任何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是否存在于您所说的路径中以及足够的权限..

于 2012-12-13T05:55:29.500 回答
0

我今天遇到了同样的问题，这让我很困惑。正如 Rishi 上面所说，它应该可以工作，但它没有。我三重检查了我的目录结构。然后最终我意识到它根本没有击中我的 glyphicons 文件。我删除了这条有问题的 css 行：

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

一切都很好！

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

于 2013-09-15T17:48:41.480 回答
0

尝试这个

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

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

让我知道这是否适合你。

于 2012-12-12T21:51:41.100 回答
0

我遇到了同样的问题，它与您的字形图标的来源或位置无关。这是一个种族问题。不幸的是，我无法告诉你它在表格中表现得这样的原因......但我知道在我的 dataTables 中发生了这种情况，我的解决方法是在页面和表格加载后通过附加 html 添加字形图标。它并不完美，但它有效。

于 2013-03-06T22:47:01.800 回答
0
  1. 从 img 文件夹复制 glyphicons-halflings.png 和 glyphicons-halflings-white.png。
  2. 在 css 文件夹中创建一个名为“img”的子文件夹。
  3. 将 glyphicons-halflings.png 和 glyphicons-halflings-white.png 粘贴到 css->img 文件夹中。
  4. 打开您的引导样式表，例如让我们在文本编辑器中说 bootstrap.css。

  5. 查找 (Ctrl+F) “图标”。6.你会找到课程。

    [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;
}

  6. 将背景图片网址更改为

    background-image: url("img/glyphicons-halflings.png");
  7. 找到“glyphicons-halflings-white.png”
  8. 也改变它的路径。还有宾果游戏！你在上面。
于 2013-09-12T13:48:47.507 回答
0

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

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

要知道将这些文件放在您的网络文件夹中的什么位置，只需运行Link Checker或Xenu 的链接侦探，它就会告诉您放置这些文件的位置。

于 2014-10-05T06:08:04.983 回答
0

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

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

于 2013-04-18T22:58:32.620 回答