Snippet – Using FontAwesome, Bootstrap, MVC for Checkbox, Radio Controls

imageSo how can you use the check-boxes from Font Awesome, and get the box to check/uncheck. When a user clicks, how do I show the right icon?

When checked: icon-check ; unchecked: icon-check-empty.

The basic idea is to select spans:before that is next to input you want..

image 

image

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 .

<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" 
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.

For example,

And the scripts to handle the input

Resources

How to use Font Awesome for checkboxes etc


		
Advertisements