Bootstrap图标已停止显示我的应用程序

时间:2012-11-16 05:45:10

标签: html css twitter-bootstrap

更新 :我解决了这个问题。问题是在我的设置文件中我指的是从Amazon S3下载CSS而不是本地机器。在S3上,我没有正确设置权限的文件。结果,它无法正常工作。

出于某种原因,自从将静态文件指向S3后,图标不再出现在我的应用程序中。

我有以下代码:

<i class="icon-globe"></i>

然而,没有任何东西出现。这在以前工作,所以不确定为什么它不再显示。

在页面源中,它不会显示图像的路径,只需:

<h5><i class="icon-globe"></i> New York </h5>

这是我的CSS:

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

我是否需要为我正在使用的每个图标设置路径?我之前没有必要在我的本地机器上这样做,但看到了图标,所以不确定是否有必要。

注意:在将背景图像硬编码到我的静态目录之前,这就是出现问题的原因 - 我想。

4 个答案:

答案 0 :(得分:0)

查找图片可能存在问题。

找到icon-globe类的定义。并将其与图像文件的实际位置进行协调。

答案 1 :(得分:0)

以前 - 在本地或某些远程Web服务器上工作.. ??

如果它在本地而不是在远程服务器上运行,那么你需要上传包含glyphicons文件的 img 目录。这样做是因为我犯了这个错误..

此外,check this post,如果有帮助..

答案 2 :(得分:0)

您是否使用aws控制台检查了文件的s3访问权限?根据您上传的方式,可以锁定它们以供公众访问(即通过网络浏览器)

答案 3 :(得分:0)

您是否尝试更改不同的网址,我的意思是说尝试使用www或不使用www并打开网站。如果它没有www打开。它意味着您的图标css样式表路径未根据www设置。我曾犯过这个错误。