css - Bootstrap 中的标签和徽章

Question

通过使用 Bootstrap ，我想显示绿色和红色标签，上下文类似于 v 或 x。

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

我写了下面的代码，但是我想有更好的效果。

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

我应该如何使用 bootstrap 获取它？

这是我通过使用 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 对所需的图标进行子集化，而不是默认包含所有图标。 .