Search code examples
csstwitter-bootstrap-3glyphicons

Twitter Bootstrap radio/checkbox - how to put glyphicon


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.


Solution

  • On the official website, the javascript section has examples of styling groups of checkboxes and radio buttons as buttons groups. It's under the buttons section here.

    Instead of having text inside the button that reads "Option 1", you would place your glyphicon instead. If you wanted only one checkbox, I suppose you could eliminate the button group and just go with a single button.

    To remove the button appearance and only show your icon, use the "btn-link" class.

    I haven't tried this myself, but I see no reason for it to not work.