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-*，因为它是由bootstrap设置的属性选择器来定位以应用所有样式（widh / height / line-height等...）。

尽量保持与原始图标（14x14）相同的宽度和高度，这样您就不必定义自己的宽度和高度，也不会弄乱你的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

发布的示例

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

2 个答案: