引导图标已停止出现我的应用程序答案

【问题标题】：Bootstrap Icons have stopped appearing my app引导图标已停止出现我的应用程序
【发布时间】：2014-11-19 06:02:41
【问题描述】：

更新：我解决了这个问题。问题是，在我的设置文件中，我指向它从 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;
}

我需要为我使用的每个图标设置路径吗？我以前不必在本地计算机上执行此操作，但看到了图标，因此不确定是否有必要。

注意：在背景图像被硬编码到我的静态目录之前，这就是问题出现的原因——我认为。

【问题讨论】：

你最近有什么改变？显示代码以便我们提供帮助
如果你检查你最喜欢的开发工具（Firebug 等），它是否会报告精灵的 404 错误？
您是否检查过该图标是否确实存在？（图标名称）
嘿@ViralShah，这是一个好点。图像文件存储在哪里，Bootstrap 如何获知它们的位置？
图标位于img 目录中。应该有两个文件：glyphicons-halflings.png 和 glyphicons-halflings-white.png。你上传了吗？

标签： html css twitter-bootstrap

【解决方案1】：

查找图像可能存在问题。

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

【讨论】：

【解决方案2】：

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

如果它在本地而不是在远程服务器上工作，那么您需要上传包含 glyphicons 文件的 img 目录..提到这一点是因为我犯了一次这个错误..

另外，check this post，如果有帮助的话..

【讨论】：

【解决方案3】：

您是否使用 aws 控制台检查了文件的 s3 访问权限？根据您上传它们的方式，它们可能会被锁定以供公众访问（即通过网络浏览器）

【讨论】：

【解决方案4】：

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

【讨论】：