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