twitter-bootstrap 引导程序中的标签和徽章
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13019929/
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
Labels and badges in bootstrap
提问by Lorraine Bernard
By using bootstrap I would like to display green and red labels which context is like a v or a x.
通过使用引导程序，我想显示上下文类似于 av 或 x 的绿色和红色标签。
The v should be green and the x should be red.
v 应为绿色，x 应为红色。
I wrote the following code, but I would like to have a better effect.
我写了下面的代码，但我想有更好的效果。
<span class="badge badge-success">V</span>
<span class="badge badge-important">X</span>
Any ideas how should I get it by using bootstrap?
任何想法我应该如何通过使用引导程序来获得它？
Here is an example of what I would get by using bootstrap labels and badges.
这是我通过使用引导标签和徽章获得的示例。
回答by nickhar
If you used font-awesome (http://fortawesome.github.com/Font-Awesome/) in combination with Twitter bootstrap (which it's designed for), you would be able to do something like this:
如果您将 font-awesome ( http://fortawesome.github.com/Font-Awesome/) 与 Twitter 引导程序（它专为它设计）结合使用，您将能够执行以下操作：
<i class="icon-ok-sign" style="color: green; font-size: 18pt;"></i>
<i class="icon-remove-sign" style="color: red; font-size: 18pt;"></i>
<br/><br/>
<i class="icon-ok-circle" style="color: green; font-size: 18pt;"></i>
<i class="icon-remove-circle" style="color: red; font-size: 18pt;"></i>
<br/><br/>
<i class="icon-ok" style="color: green; font-size: 14pt;"></i>
<i class="icon-remove" style="color: red; font-size: 14pt;"></i>
Which would output this:
哪个会输出这个：
Or you could use CSS classes defined elsewhere to style them appropriately.
或者您可以使用在别处定义的 CSS 类来适当地设置样式。
Font-awesome is based upon SVG images and they scale to any size (within reason and use).
You can now also subset the icons you need rather than including them all by default using icnfnt.
Font-awesome 基于 SVG 图像，它们可以缩放到任何大小（在合理和使用范围内）。
您现在还可以对需要的图标进行子集化，而不是默认使用icnfnt 将它们全部包含在内。
