When checked: icon-check ; unchecked: icon-check-empty.
The basic idea is to select spans:before that is next to input you want..
If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify.
As a side-note, you can style things however you like using this method, so change color, background, shadow-color, icons, etc.
You can get the character to add using the FontAwesome source.
If you are supporting IE 6 – 8, you will need to use selectivizr .
src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"</script> <noscript><link rel="stylesheet" href="[fallback css that display:inline-block radios & checkboxes]" /></noscript>
MVC Supports Forms
In order to use this in a form, you can add a hidden field to update the value in your object for incoming data. The styles are bootstrap and the additional styles from the previous section.
And the scripts to handle the input