javascript - How to create checkbox looks like font-awesome glyphicon

Question

I want to create a font-awesome glyph-icon which act like checkbox, this means that I need to create a checkbox, which need to disguise as font-awesome icon.

I don't need to have a label for current checkbox,just font-awesome icon which turn on and off. check state, icon is on color one. uncheck state icon is on color two.

check state: uncheck state:

How can I do it?!

Answer 1

You can do achieve this even without Javascript.

#checkbox{
  background:#2f8cab;
  display:inline-block;
  padding:15px 18px;
  border-radius:2px;
  position:relative;
  cursor:pointer;
}

#checkbox-element{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:99999;
  opacity:0;
}

#checkbox>input[type='checkbox']+i{
  color:rgba(255,255,255,0.2); // color 1
}

#checkbox>input[type='checkbox']:checked+i{
  color:#fff; //color 2
}

And here's the markup,

<span id="checkbox">
  <input id="checkbox-element" type="checkbox"/>  
  <i class="glyphicon glyphicon-check"></i>
</span>

Have a look at this demo, http://jsbin.com/dusokagise/edit?html,css,output

For Inspiration: https://lokesh-coder.github.io/pretty-checkbox/

Thanks!