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

Question

我用 Twitter Bootstrap 添加图标没有问题。他们有很多选择。

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

但是，我找不到菜单项之一的合适图标。这是关于“汽车”的。我想要的是我想添加我的自定义图标。我怎样才能做到这一点？

Answer 1

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

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

当然要记住使用前缀.icon-*，因为它是由引导程序设置的属性选择器定位的，以应用所有样式（宽度/高度/行高等...）。

只需尝试保持与原始图标（14x14）相同的宽度和高度，这样您就不必定义自己的宽度和高度，也不会与line-height您的元素混淆。这是一个带有这种情况的演示：http: //jsfiddle.net/RwFeu/

Answer 2

这就是我们所做的，以便所有图标都在一个 sprite 文件中，并且您可以允许任意大小的图标。

创建一个 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 -->

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

JSFiddle 在http://jsfiddle.net/shyamh/cvHdt/

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