CSS

Customized checkbox

by iMonet

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<p>Test1: <input></input>, Test2:  <input></input>
</p>

<p>
checkbox1:<input type="checkbox"></input> 
checkbox2:<input type="checkbox"><i class="fa fa-star fa-2x"></i></input> 
</p>
   
    <p>
        <input type="checkbox"></input> Facebook
        <input type="checkbox" class='cb-star'></input>
    </p>
    <p>
        <input type="checkbox"></input> Google 
        <input type="checkbox" class='cb-star'></input>
    </p>
    <p>
        <input type="checkbox"></input> Break 
        <input type="checkbox" class='cb-star'></input>
    </p>

CSS

p {line-height:30px;}
.cb-star {
  font-family: 'FontAwesome';  
  float: right;    

  height: auto;
  text-align: center;    
  margin: auto 20px;
    /*   
  width: 40px;
  margin-right:30px;
  position: absolute;
  margin: auto 0;
    */
    border: none;  /*Mobile Safari */
  -webkit-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

.cb-star:after {
  content: '\f005';
  line-height: 43px; /* 40 + a couple of pixels visual adjustment */
  font-size: 30px;
  color: #d9d9d9;
  text-shadow: 0 -1px 0 #bfbfbf;
}

.cb-star:checked:after {
  color: gold;
    text-shadow: 0px -1px 1px 1px  #555;
  /*
  content: '\f005';
  bottom: 1px;
  position: relative;
    */
}