Labels und Badges im Bootstrap

Question

Mit Bootstrap möchte ich grüne und rote Etiketten anzeigen, deren Kontext wie ein v oder ein x ist.

Das v sollte grün sein und das x sollte rot sein.

Ich schrieb den folgenden Code, aber ich möchte einen besseren Effekt haben.

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

Irgendwelche Ideen wie soll ich es bekommen, indem Sie Bootstrap verwenden?

Hier ist ein Beispiel für das, was ich mit Bootstrap-Etiketten und Abzeichen bekommen würde.

Answer 1

Wenn Sie font-awesome verwendet (http://fortawesome.github.com/Font-Awesome/) in Kombination mit Twitter Bootstrap (die es für entworfen ist), würden Sie in der Lage sein, so etwas zu tun:

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

Oder Sie könnten CSS-Klassen verwenden, die anderswo definiert sind, um sie entsprechend zu formatieren.

Font-awesome basiert auf SVG-Bildern und skaliert zu jeder Größe (innerhalb des Grundes und der Verwendung).
Sie können jetzt auch die benötigten Symbole nach Bedarf aufteilen, anstatt sie alle standardmäßig mit icnfnt einzuschließen.