css - 引导程序中的标签和徽章

Question

通过使用引导程序，我想显示上下文类似于 av 或 a x 的绿色和红色标签。

v 应该是绿色的，x 应该是红色的。

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

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

任何想法我应该如何使用引导程序来获得它？

这是我使用引导标签和徽章获得的示例。

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对您需要的图标进行子集化，而不是默认包含它们。