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.

input[type="radio"],
input[type="checkbox"] {
display:none;
}
input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
fontfamily: 'FontAwesome';
paddingright: 3px;
fontsize: 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 */
}

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>
}

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");
}
});

view raw
spa-onClick.js
hosted with ❤ by GitHub

Resources

How to use Font Awesome for checkboxes etc