引导程序中的标签和徽章

Question

通过使用bootstrap我想显示绿色和红色标签，其上下文就像v或x。

v应为绿色，x应为红色。

我编写了以下代码，但我希望有更好的效果。

<span class="badge badge-success">V</span>
<span class="badge badge-important">X</span>

任何想法我应该如何通过使用bootstrap获得它？

以下是使用引导程序标签和徽章获得的示例。

Answer 1

如果你将font-awesome（http://fortawesome.github.com/Font-Awesome/）与Twitter bootstrap（它的设计用途）结合使用，你可以做到这样的事情：

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

哪会输出这个：

或者您可以使用其他地方定义的CSS类来适当地设置它们的样式。

Font-awesome基于SVG图像，它们可以缩放到任何大小（在合理范围内和使用中） 您现在还可以使用icnfnt对所需图标进行子集化，而不是将它们全部包含在内。