在Twitter Bootstrap 3中使用图像图标

时间:2013-10-17 19:54:12

标签: css twitter-bootstrap

我正在从Twitter Bootstrap v2迁移到v3。在v2中,我在css中定义了十几个自定义图标:

.icon-pc {
    background-image: url("pc.png");
    background-position: center center;
}

我知道在Twitter Bootstrap v3中他们现在使用Glyphicons,但这对我来说不是一个现实的方法,因为我的图标是多色的PNG文件,并且不能很好地用作字体... < / p>

是否有一种简单的方法可以像在旧的v2图标中那样在v3中完成这些工作?

1 个答案:

答案 0 :(得分:1)

从sprites.less生成的css复制此块,就像一个魅力:

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
}

现在我的老<i class="icon-custom"></i>工作得很好。