ブートストラップを使用して、avまたはxのようなコンテキストの緑と赤のラベルを表示したいと思います。
vは緑、xは赤である必要があります。
次のコードを書きましたが、もっと効果を上げたいです。
<span class="badge badge-success">V</span>
<span class="badge badge-important">X</span>
ブートストラップを使用してどのように取得する必要がありますか？
これは、ブートストラップラベルとバッジを使用して得られるものの例です。
font-awesome ( http://fortawesome.github.com/Font-Awesome/ ) を Twitter ブートストラップ (このために設計されています) と組み合わせて使用すると、次のようなことができます。
<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
を使用して、デフォルトですべてのアイコンを含めるのではなく、必要なアイコンをサブセット化できるようになりました。