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

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

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

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

Answer 1

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

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

请牢记使用前缀.icon-*因为它是由引导程序设置的属性select器来应用所有样式（widh / height / line-height等）的目标。

只要保持与原始图标（14×14）相同的宽度和高度，这样您就不必定义自己的宽度和高度，也不会混乱元素的line-height 。 这里有一个这样的案例演示： http : //jsfiddle.net/RwFeu/

Answer 2

这是我们所做的，所有的图标都在一个精灵文件中，你可以允许任意大小的图标。

像创build一个CSS文件

 [class^="icon-custom-"], [class*=" icon-custom-"] { background-image: url("https://app.10000ft.comhttp://img.dovov.comcompSpritesButtonsIcons.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在http://jsfiddle.net/shyamh/cvHdt/

此解决scheme基于Kevin发布的示例