ブートストラップのラベルとバッジ

Question

ブートストラップを使って、文脈がvかaのような緑と赤のラベルを表示したいと思います。

vは緑色で、xは赤色でなければなりません。

私は以下のコードを書いていますが、私はより良い効果を得たいと思います。

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

ブートストラップを使用してどうすればよいですか？

ここでは、ブートストラップのラベルとバッジを使用した例を示します。

Answer 1

あなたは（それがために設計されています）Twitterのブートストラップとの組み合わせでフォント素晴らしい（http://fortawesome.github.com/Font-Awesome/）を使用した場合、あなたはこのような何かを行うことができるだろう：

<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を使用して、デフォルトですべてのアイコンを含めるのではなく、必要なアイコンをサブセット化できるようになりました。