Labels and badges in bootstrap

Question

By using bootstrap I would like to display green and red labels which context is like a v or a x.

The v should be green and the x should be red.

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.

Answer 1

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:

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

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.