如何添加在Twitter的引导自定义图标？(How to add custom icon in Tw

我添加图标与Twitter的引导没有问题。 他们有很多的替代品。

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-* ，因为它是由引导设置为应用所有样式（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 -->

请注意，这个假设包含了所有的图标一个精灵的文件。 如果你有多个精灵文件时， background-image需要为每个图标进行设置，因此。

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

该解决方案是基于发表的例子凯文

文章来源: How to add custom icon in Twitter Bootstrap?