在 Twitter Bootstrap 3 中使用图像图标答案

【问题标题】：Use image icons in Twitter Bootstrap 3在 Twitter Bootstrap 3 中使用图像图标
【发布时间】：2013-10-18 04:09:37
【问题描述】：

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

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

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

有没有像旧的 v2 图标那样在 v3 中完成这些工作的简单方法？

【问题讨论】：

如果你深入bootstrap中sprites.less的源码，你会发现bootstrap的图标代码非常小。创建自己的图标类集并不难。
@MikeRobinson - 谢谢，工作就像一个魅力。
如果同一图标的多种颜色阻碍了您使用字形图标，您是否意识到可以添加第二个类来定义颜色？例如：然后在样式表中定义 .red。
@MattLambert - 多种颜色不是指红色 glpyhs 和绿色 glpyhs，而是指全彩色 PNG 图标，在我的情况下可能包含 40 或 50 种颜色的像素。
@Peter 哦，好吧，我明白你的意思了，是的，那么 png 是最好的路线

标签： css twitter-bootstrap

【解决方案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> 工作正常。

【讨论】：