Is it posible to make an input checkbox a Bootstrap glyphicon? - css

Question

Is it posible to make an input checkbox a Bootstrap glyphicon?
I want to make up the default checkboxes with a nice Bootstrap glyphicon.
For example: glyphicon glyphicon-unchecked and when checked: glyphicon glyphicon-check.
I've tried this:
input[type='checkbox'] {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e157";
}
But nothing happened..
I don't know if that's posible?

Answer 1

You can achieve that in a couple of methods:
Method 1
inside a <label> tag, two <tags> that represent the icons that you want need to be placed(or outside, per use scenario)
then toggle these two <tags>, when the input[type='checkbox'] is checked or unchecked
done.
Method 2
a cleaner approach to the above one, would be to use the css from bootstraps icons, and place them in a :before(or :after depending on your scenarion) on the <label> tag
then toggle the content prop. of the :before class, that the icons that you want have, when the input[type='checkbox'] is checked or unchecked
done.
Check out the demo here and also, a couple of more through documentation on this matter:
Add boostrap icon to input boxes
Boostrap checkbox documentation

Answer 2

If you're able to modify your markup a bit, this should do:
<label for="myCheckbox" class="glyphy">
<input type="checkbox" id="myCheckbox" />
<span class="glyphicon glyphicon-unchecked"></span>
label words
</label>
$('.glyphy').click(function (e) {
if ($(e.target).is('input')) { // prevent double-event due to bubbling
$(this).find('.glyphicon').toggleClass('glyphicon-check glyphicon-unchecked');
}
});
Demo

Answer 3

if you have the icons, you can style it as such: http://jsfiddle.net/swm53ran/164/
/*hide checkbox and radio buttons*/
input[type=checkbox],
input[type=radio] {
width: 2em;
margin: 0;
padding: 0;
font-size: 1em;
opacity: 0; /*This is the part tht actually hides it*/
}
/*normalize the spacing*/
input[type=checkbox] + label,
input[type=radio] + label {
display: inline-block;
margin-left: -2em;
line-height: 1.5em;
}
/*unchecked css*/
input[type=checkbox] + label > span,
input[type=radio] + label > span {
display: inline-block;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Face-sad.svg/48px-Face-sad.svg.png');
width: 50px;
height: 50px;
}
/*selected checkbox css*/
input[type=checkbox]:checked + label > span > span {
width: 50px;
height: 50px;
display:block;
background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}
/*selected radio css*/
input[type=radio]:checked + label > span > span {
width: 50px;
height: 50px;
display:block;
background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}
<div>
<input id="check1" type="checkbox" name="check1" value="check1" />
<label for="check1"><span><span></span></span>Checkbox</label>
</div>
<div>
<input id="radio1" type="radio" name="radio" value="radio1" />
<label for="radio1"><span><span></span></span>Radio1</label>
</div>
<div>
<input id="radio2" type="radio" name="radio" value="radio2" />
<label for="radio2"><span><span></span></span>Radio2</label>
</div>