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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 */ | |
} |
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,
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('#OkToEmailButtonGroup input').on('click', function () { | |
if ($(this).attr("value") == 0) { | |
$("#TheContact_OKToEmail").val("true"); | |
} else { | |
$("#TheContact_OKToEmail").val("false"); | |
} | |
}); |