Etykiety i znaczki w bootstrapie

Question

Korzystając z ładowania początkowego, chciałbym wyświetlić zielone i czerwone etykiety, których kontekst jest podobny do v lub a x.

Litera v powinna być zielona, ​​a symbol x powinien być czerwony.

Napisałem poniższy kod, ale chciałbym mieć lepszy efekt.

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

Jakieś pomysły, w jaki sposób mogę je uzyskać za pomocą bootstrap?

Oto przykład tego, co otrzymam za pomocą etykiet i znaczników startowych.

Answer 1

Jeśli używany font-niesamowite (http://fortawesome.github.com/Font-Awesome/) w połączeniu z Twittera bootstrap (których jest ono przeznaczone dla), byłbyś w stanie zrobić coś takiego:

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

Który wyświetli to:

Lub możesz użyć klas CSS zdefiniowanych w innym miejscu, aby odpowiednio je odpowiednio zaprojektować.

Font-awesome bazuje na obrazach SVG i skaluje się do dowolnego rozmiaru (w granicach rozsądku i użycia).
Teraz można również podzbiorować ikony, które są im potrzebne, a nie włączać ich domyślnie przy użyciu icnfnt.