2012-12-12 47 views
5

这是一个愚蠢的问题,但在这里,我们无论如何去。这里是我的基本结构Twitter引导字形图标不加载

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

所以内容和IMG都在我的根目录,所以要指涉从我bootstrap.css文件字形图像我有这样的:

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

YU NO显示?

是否有.js文件我需要检查以确保它正在正确的目录中查找?

哦,这里是的,我想获得的图像来呈现一个片段:

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

UPDATE

还有的是有很多的意见这个问题,所以我想我会分享我的两分钱。一个注意事项是,自从发布BS 3.0问题以来,现在已经不存在了,所以结构可能是不同的和/或不相关的,还没有看过它。但是如果你到了这里,请记住这是3.0之前的Bootstrap。

我已经开始这样做的一件事,使得我没有必要惹恼任何事情,就是将整个bootstrap文件夹放到项目中,而不仅仅是css/js/img文件夹。我通常把它放在我的根文件夹中的脚本,像这样的结构:

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

这可能会破坏某些约定因为“脚本”文件夹真的应该牵住脚本。我证明这一点,因为我使用脚本文件夹(惊喜!)和第三方库(因此libs文件夹)。你获得的大多数第三方组件至少有js和css文件,而我只是懒得让它们手动分离,因为一些库(如bootstrap)依赖于其他文件的位置。

无论如何,我的两毛钱,如果你想改变文件的位置,请看下面的答案。所有伟大的提示,感谢所有人!

回答

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

+0

是的,我在桌子上有另一个地方,它正是这个:但仍然没有。非常奇怪的问题。 – ledgeJumper

+0

你检查过,如果文件_glyphicons-halflings.png_存在于服务器上,并呈现正确.. ?? –

+0

在Chrome中打开页面,右键单击字形应显示的位置,然后单击“检查元素”。这将启动Chrome的开发者工具...在“元素”选项卡中找到您的“”,然后点击它以显示适用于该元素的CSS规则。其中一条规则将成为glyphicons-haflings.png的路径。右键单击该路径,然后在新选项卡中打开。如果图像不显示,请查看URL路径并确定您需要对CSS规则进行的调整。 –

0

试试这个

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

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

让我知道,如果这对你有用。

+0

这是一个不幸去.. – ledgeJumper

+0

打开正斜杠代表根 –

+0

为什么downvote到底?这对我来说似乎是一个可行的建议。 – ledgeJumper

0

我遇到了同样的问题,它与您的图标的来源或位置无关。这是一个种族问题。我不幸地不能告诉你为什么它在表格中表现得像这样...但是我知道在我的dataTables中发生这种情况,我的方法是在页面和表格加载后通过附加html来添加图形。这不是完美的,但它的工作原理。

0

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

我下载的文件包含一个强调但CSS正在寻找与glyphicons和半身人之间的破折号的文件。更换一个或另一个,并确保将其上传到服务器上的正确文件夹。

0
  1. 复制glyphicons-halflings.png & glyphicons-halflings-white.png从img文件夹。
  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. 更改背景图片的URL

    background-image: url("img/glyphicons-halflings.png"); 
    
  7. 发现 “glyphicons,半身人,white.png”
  8. 改变它的路径也。 和宾果!你在上面。
0

我今天遇到同样的问题,它让我感到困惑。正如Rishi上面所说,它应该可以工作,但它却没有。我三重检查了我的目录结构。最后我意识到它根本没有打我的图形文件。我删除了这个有问题的css行:

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

而且一切都很好!

请记住,如果您要包含font-awesome,那么它将查找字体文件而不是glyphicons文件。因此,要么添加适当的字体,要么使用普通的旧bootstrap。

0

只有在字体文件夹中包含以下文件时,图标图标才会加载。 glyphicons-halflings-regular.eotglyphicons-halflings-regular.svgglyphicons-halflings-regular.ttfglyphicons-halflings-regular.woff

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

要知道将这些文件放在网络文件夹中的位置,只需运行Link CheckerXenu's link sleuth,它会告诉你放置这些文件的位置。