CSS 如何在 Twitter Bootstrap 中添加自定义图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10393325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add custom icon in Twitter Bootstrap?
提问by SNaRe
I'm adding icon with Twitter Bootstrap without problem. They have a lot of alternatives.
我正在使用 Twitter Bootstrap 添加图标，没有问题。他们有很多选择。
However, I couldn't find appropriate icon for one of menu item. It is about "car". What I want is I would like to add my custom icon. How can I do this?
但是，我找不到菜单项之一的合适图标。是关于“车”的。我想要的是我想添加我的自定义图标。我怎样才能做到这一点？
回答by Andres Ilich
You can create your own icon by defining it in your own class like s:
您可以通过在您自己的类中定义它来创建自己的图标，例如：
.icon-car {
background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
background-position: center center;
}
Keeping in mind of course to use the prefix .icon-*since it is targetted by an attribute selector set by the bootstrap to apply all styles (widh/height/line-height etc...).
请记住当然要使用前缀，.icon-*因为它是由引导程序设置的属性选择器定位的，以应用所有样式（宽度/高度/行高等...）。
Just try to keep to the same width and height as the original icons (14x14), this way you won't have to define your own width and height and it won't mess with the line-heightof your elements. Here is a demo with such a case: http://jsfiddle.net/RwFeu/
尽量保持与原始图标 (14x14) 相同的宽度和高度，这样您就不必定义自己的宽度和高度，也不会弄乱line-height您的元素。这是一个带有这种情况的演示：http: //jsfiddle.net/RwFeu/
回答by Shyam Habarakada
Here's what we do, so that all the icons are in a single sprite file and you can allow arbitrary sized icons.
这就是我们所做的，所以所有的图标都在一个单一的精灵文件中，你可以允许任意大小的图标。
create a CSS file like
创建一个 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 }
And then in your markup,
然后在你的标记中，
<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 -->
Note that this assumes a single sprites file that contains all the icons. If you have multiple sprite files, the background-imageneeds to be set for each icon, accordingly.
请注意，这假定包含所有图标的单个精灵文件。如果您有多个精灵文件，则background-image需要相应地为每个图标设置。
JSFiddle at http://jsfiddle.net/shyamh/cvHdt/
JSFiddle 在http://jsfiddle.net/shyamh/cvHdt/
This solution is based on the example posted by Kevin
此解决方案基于Kevin发布的示例
