Motivation
The HTML check box input type is just difficult to style across browsers. I tried various CSS hacks before deciding it wasn't worth the time to deal with all the problems and testing and would be easier to just code up a control that has the behavior and display I expect.
Usage
To use the control (first install font-awesome):
bower install shusain/angular-sh-checkbox#~0.0.1 --save
Include font-awesome css and the check box directive in your script block:
<script type="text/javascript" src="bower_components/angular-sh-checkbox/directive.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css"/>
Include the module dependency in your app:
var myApp = angular.module("myApp", ["intellectual-tech.UIControls"]);
Use the directive:
<sh-checkbox
label="Test 1"
ng-model="test">
</sh-checkbox>
<sh-checkbox
label="Test 2"
ng-model="test"
checked-icon-class="fa fa-check-square-o"
un-checked-icon-class="fa fa-square-o">
</sh-checkbox>
Authors and Contributors
2014, Shaun Husain (@shusain)
Support or Contact
Having trouble with the control? Contact us at http://www.intellectual-tech.com, shaun@intellectual-tech.com.