<h5>Using Glyphicon</h5>
<div class="row cell-data-center">
<label class="col-sm-3">
<input type="checkbox" class="glyphicon glyphicon-star-empty" >
</label>
<label class="col-sm-3">
<input type="checkbox" class="glyphicon glyphicon-heart-empty color-active " >
</label>
<label class="col-sm-3">
<input type="checkbox" class="glyphicon glyphicon-unchecked" >
</label>
<label class="col-sm-3">
<input type="checkbox" class="glyphicon glyphicon-floppy-disk" >
</label>
<div class="clearfix"></div>
</div>
</div>


<h5>Using FontAwesome</h5>
<div class="row cell-data-center">
<label class="col-sm-3">
<input type="checkbox" class="fa fa-star-o" >
</label>
<label class="col-sm-3">
<input type="checkbox" class="fa fa-heart-o" >
</label>
<label class="col-sm-3">
<input type="checkbox" class="fa fa-square-o fa-unchecked" >
</label>
<label class="col-sm-3">
<input type="checkbox" class="fa fa-print" >
</label>
<div class="clearfix"></div>
</div>
</div>

.cell-data-center label,
.cell-data-center{
  text-align:center;
  position:relative;
}
.cell-data-center label{  
  -moz-box-shadow:0 0 2px #e5e5e5;
  -webkit-box-shadow:0 0 2px #e5e5e5;
  -o-shadow:0 0 2px #e5e5e5;
  -ms-shadow:0 0 2px #e5e5e5;
  box-shadow:0 0 2px #e5e5e5;
  line-height:50px;
  padding-bottom:35px;
  display:inline-block;
}
.cell-data-center .glyphicon,
.cell-data-center .fa{
  font-size:32px;
  line-height:50px;
 }

.glyphicon:before,
.fa:before {
 visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
   content: "\e006";
   color:#ffcc00;
}
.glyphicon.glyphicon-heart-empty:checked:before {
   content: "\e005";
   color:#ff2400;
}
.glyphicon.glyphicon-unchecked:checked:before {
   content:"\e067";
}
.glyphicon.glyphicon-floppy-disk:checked:before {
   content:"\e173";
   color:#0e548b;
}


.fa.fa-star-o:checked:before {
   content: "\f005";
   color:#ffcc00;
}
.fa.fa-heart-o:checked:before {
   content: "\f004";
   color:#ff2400;
}
.fa.fa-unchecked:checked:before {
   content:"\f046";
}
.fa.fa-print:checked:before {
   content:"\f02f";
   color:#0e548b;
}

input[type=checkbox].glyphicon,
input[type=checkbox].fa{
    visibility: hidden;
}