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

Question

我正在添加Twitter Bootstrap的图标没有问题.他们有很多选择.

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

但是,我找不到其中一个菜单项的相应图标.这是关于"汽车".我想要的是我想添加我的自定义图标.我怎样才能做到这一点？

Answer 1

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

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

牢记当然使用前缀.icon-*,因为它是由引导设置为应用所有样式(widh /高/行高度等等)的属性选择针对性.

只是尽量保持相同的宽度和高度与原图标(14×14),这样你就不必定义自己的宽度和高度,也不会乱用line-height你的元素.这是一个带有这种情况的演示:http://jsfiddle.net/RwFeu/

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 -->

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

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

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