Css 引导图标不显示

我下载了引导图标的图像，我想在网页中使用它们

我有图像和正确的CSS

但他们根本没有展示任何东西

CSS

HTML

宾夕法尼亚州匹兹堡15276

拨弄

---

我把图像上传到一个imgur帐户

你错过了一些造型。。主要是

显示：
span
元素上的block

试试这个：

.icon-home {
  background-image:url(http://i.imgur.com/UMAlj55.png);
  background-position: 0 -24px;
  width: 12px;
  height: 12px;
  display:block;
}

或者更好：

.icon {
  background-image:url(http://i.imgur.com/UMAlj55.png);
  width: 12px;
  height: 12px;
  display:block;
}

.icon-home {
  background-position: 0 -24px;
}

.icon-car {
  background-position: 0 -36px;
}

...

---

您没有为该图标设置任何宽度和高度。它应该在那里，但大小为0px。我已经更新了ehight和width，但仍然没有更新。更新的Fiddle您还可以将

.icon home

更改为

.icon.home

并使用

class=“home icon”

。

宽度

和

高度

应为

15px

以显示整个图标图像，如果要将文本添加到与图标相同的行中，则应使用

显示：内联块

而不是

显示：块

@FabioG+1，但是谁设置图标的宽度和高度=）？现在，我们在内联伪元素中使用图标字体。所以只有字体大小才重要。@Pierre true story！：）

.icon-home {
  background-image:url(http://i.imgur.com/UMAlj55.png);
  background-position: 0 -24px;
  width: 12px;
  height: 12px;
  display:block;
}

.icon {
  background-image:url(http://i.imgur.com/UMAlj55.png);
  width: 12px;
  height: 12px;
  display:block;
}

.icon-home {
  background-position: 0 -24px;
}

.icon-car {
  background-position: 0 -36px;
}

...