Question

只测试CSS精灵，但由于某些原因无法让它们正常工作。

Codepen：http://codepen.io/mildrenben/pen/VYWxbM

HTML：

<i class="icon-electrical14"></i>
<i class="icon-hazelnut1"></i>
<i class="icon-megaphone10"></i>
<i class="icon-winds2"></i>

CSS：

.icon-electrical14 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: 0px 0px;
  width: 64px;
  height: 64px;
}
.icon-hazelnut1 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: -64px 0px;
  width: 64px;
  height: 64px;
}
.icon-megaphone10 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: 0px -64px;
  width: 64px;
  height: 56px;
}
.icon-winds2 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: -64px -64px;
  width: 64px;
  height: 52px;
}

Answer 1

将display: block或inline-block应用于i。

<强> Updated CodePen

＆＃13;

i[class*="icon-"] {
  display: block;
}
.icon-electrical14 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: 0px 0px;
  width: 64px;
  height: 64px;
}
.icon-hazelnut1 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: -64px 0px;
  width: 64px;
  height: 64px;
}
.icon-megaphone10 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: 0px -64px;
  width: 64px;
  height: 56px;
}
.icon-winds2 {
  background-image: url(http://i.imgur.com/CEIxDuO.png);
  background-position: -64px -64px;
  width: 64px;
  height: 52px;
}

＆＃13;

<i class="icon-electrical14"></i>
<i class="icon-hazelnut1"></i>
<i class="icon-megaphone10"></i>
<i class="icon-winds2"></i>

＆＃13;

旁注：如果您的页面上有一些专用于字体而不是图标的i标记，则可以使用以下选择器选择具有icon的类class属性中的关键字。

i[class*="icon"] {....}

为什么我的CSS Sprites不起作用？

1 个答案: