Twitter Bootstrap radio/checkbox - how to put glyphicon

Question

Using TB, is it possible to style the radio or checkbox so that it shows a glyphicon instead of the default style for radio or checkbox? I want to use a glyphicon glyphicon-star to indicate unchecked, then glyphicon glyphicon-star-empty to indicate checked.

Answer 1

Without javascript you could modify the style... Its kind of a hack in my opinion but it was interesting because I realized that boostrap uses an icon font #newb.

HTML

<input type="checkbox" class="glyphicon glyphicon-star-empty" >

CSS

.glyphicon:before {
     visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
    content: "\e006";
}
input[type=checkbox].glyphicon{
     visibility: hidden;        
}

Try it out HERE