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

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

Answer 1

You can achieve that in a couple of methods:

Method 1

• inside a tag, two that represent the icons that you want need to be placed(or outside, per use scenario)
• then toggle these two , 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 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