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

i want create font-awesome glyph-icon act checkbox, means need create checkbox, need disguise font-awesome icon.

i don't need have label current checkbox,just font-awesome icon turn on , off. check state, icon on color one. uncheck state icon on color two.

check state: uncheck state:

how can it?!

you can achieve 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 markup,

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

have @ demo, http://jsbin.com/dusokagise/edit?html,css,output

for inspiration: https://lokesh-coder.github.io/pretty-checkbox/

thanks!