如何在Twitter Bootstrap中添加自定义图标？

Question

我正在使用Twitter Bootstrap添加图标，没有遇到问题。它们有很多可选项。

http://twitter.github.com/bootstrap/base-css.html#icons

然而，我找不到适合菜单项之一的图标。这是关于“汽车”的内容。 我想要的是添加自定义图标。我该怎么做？

- SNaRe

Answer 1

您可以通过在自己的类中定义它来创建自己的图标，例如：

.icon-car {
    background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
    background-position: center center;
}

当然要记得使用前缀.icon-*，因为Bootstrap设置了一个属性选择器来应用所有样式（宽度/高度/行高等）。

尽可能保持原始图标的宽度和高度（14x14），这样您就不必定义自己的宽度和高度，也不会干扰元素的line-height。下面是一个演示示例：http://jsfiddle.net/RwFeu/

- Andres Ilich

---

@SNaRe 白色图标表格，黑色图标表格。 - Andres Ilich

在这种情况下，您建议我怎么做？我用Photoshop将颜色改为白色。然而，现在看起来很奇怪。 - SNaRe

我的意思是，我想把颜色改成白色。我用 Photoshop 把黑色改成了白色，但它显示不正确。问题不在于找图标，我已经有了。问题在于让它变成白色。 - SNaRe

@SNaRe 哦，那是一个完全不同的问题的主题 :P ..但在 Photoshop 中，您可以通过“图像>调整>反转”来反转颜色，这应该会翻转颜色，并且当然要以其原始格式保存它，这应该以 PNG-24 格式带透明度保存为 Web 和设备。 - Andres Ilich

我同意Max的观点，这似乎不再起作用 :( - Alexander Mills

Answer 2

这是我们的做法，将所有图标放在一个单独的精灵文件中，您可以允许任意大小的图标。

创建一个CSS文件如下：

[class^="icon-custom-"],
[class*=" icon-custom-"] {
  background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8");
}

.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px;  }
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px  } 

接着在你的标记中，

<i class="icon-search"></i> a standard bootstrap icon
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file.
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon
<!-- spritefile from www.10000ft.com. not for reuse, please -->

请注意，这假设有一个包含所有图标的单个精灵文件。如果您有多个精灵文件，则需要相应地设置每个图标的background-image。

JSFiddle

该解决方案基于Kevin发布的示例。

- Shyam Habarakada