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

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

If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify.

	input[type="radio"],
	input[type="checkbox"] {
	display:none;
	}

	input[type="radio"] + span:before,
	input[type="checkbox"] + span:before {
	font–family: 'FontAwesome';
	padding–right: 3px;
	font–size: 20px;
	}

	input[type="radio"] + span:before {
	content: "\f10c"; /* circle-blank */
	}

	input[type="radio"]:checked + span:before {
	content: "\f111"; /* circle */
	}

	input[type="checkbox"] + span:before {
	content: "\f096"; /* check-empty */
	}

	input[type="checkbox"]:checked + span:before {
	content: "\f046"; /* check */
	}

view raw

js-fontawesomeCheckbox.js

hosted with ❤ by GitHub

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,

	@using (Html.BeginForm())
	{
	@Html.AntiForgeryToken()
	<fieldset class="form-horizontal">
	<legend>Contact Information</legend>
	<div class="form-group">
	@{
	var OkToEmailChecked = Model.TheContact.OKToEmail == true ? "checked" : "";
	var ContactOnceChecked = Model.TheContact.OKToEmail != true ? "checked" : "";
	}
	@Html.HiddenFor(model => model.TheContact.OKToEmail)
	@Html.LabelFor(model => model.TheContact.OKToEmail,
	new { @class = "col-sm-2 control-label" })
	<div id="OkToEmailButtonGroup" class="row">
	<div class="col-sm-2">
	<label for="okToEmail">
	<input type="radio" name="OkToEmail" id="okToEmail" value="0"
	@OkToEmailChecked />
	<span>Send Newsletters</span>
	</label>
	</div>
	<div class="col-sm-2">
	<label for="contactOnce">
	<input type="radio" name="OkToEmail" id="contactOnce" value="1"
	@ContactOnceChecked />
	<span>Contact Once</span>
	</label>
	</div>
	</div>
	</div>
	</fieldset>
	<fieldset class="form-horizontal">
	<legend>Classtimes</legend>
	<div class="btn-group" data-toggle="buttons">
	<label class="checkbox btn btn-default">
	<input type="checkbox" name="Weekdays" value="Weekdays"
	@(Model.Weekdays ? "checked" : "") /><span>Weekdays</span>
	</label>
	<label class="checkbox btn btn-default">
	<input type="checkbox" name="Evenings" value="Evenings"
	@(Model.Evenings ? "checked" : "") /><span>Evenings</span>
	</label>
	<label class="checkbox btn btn-default">
	<input type="checkbox" name="Weekends" value="Weekends"
	@(Model.Weekends ? "checked" : "") /><span>Weekends</span>
	</label>
	<label class="checkbox btn btn-default">
	<input type="checkbox" name="Online" value="Online"
	@(Model.Online ? "checked" : "") /><span>Online</span>
	</label>
	</div>
	</fieldset> <fieldset class="form-horizontal" style="padding-top: 1em">
	<div class="form-actions no-color" style="text-align:center">
	<input type="submit" value="Send" class="button large dark" />
	</div>
	</fieldset>
	}

view raw

ojs-checkboxForm.cshtml

hosted with ❤ by GitHub

And the scripts to handle the input

	$('#OkToEmailButtonGroup input').on('click', function () {
	if ($(this).attr("value") == 0) {
	$("#TheContact_OKToEmail").val("true");
	} else {
	$("#TheContact_OKToEmail").val("false");
	}
	});