Question

我为bootstraps图标下载了图片，我想在网页中使用它们

我有图片和正确的CSS

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

CSS

.icon-home {
  background-image:url(../img/glyphicons-halflings.png);
  background-position: 0 -24px;
}

HTML

                        <div class="col">
                            <span class="icon-home"></span>
                            <p>Pittsburgh, PA 15276</p>
                        </div>

小提琴

https://jsfiddle.net/jwct6rmk/

我将图片上传到imgur帐户。

Answer 1

您错过了一些样式..主要是display:block元素上的span。

试试这个：

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

...

引导图标不显示

1 个答案: