Checkbox Personalizado

CheckBox Normal customizado

by Martin Miranda

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://github.com/pfefferle/openwebicons/blob/master/css/openwebicons.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<div id="container">
<h1 style="text-align:center;font-family:Arial">Checkbox Modificados</h1>
<input id="Option" type="checkbox">
    <label class="checkbox" for="Option"> Verifica!<span class="tick fa fa-check"></span> </label>
    

</div>

CSS

.checkbox {
		display: inline-block;
		cursor: pointer;
		font-size: 13px; margin-right:10px; 
        line-height:3.5em;
           Font-size:1em;
        font-family:Raleway;
	}
	input[type=checkbox] {
		display:none; 
	}
	.checkbox:before {
		content: "";
		display: inline-block;
		width: 50px;
		height: 50px;
		vertical-align:middle;
		background-color: white;
		color: #f3f3f3;
		text-align: center; 
		border-radius: 5px;
        border:1px solid #e5e5e5;
	}
    .tick{
        visibility:hidden;
    }
	input[type=checkbox]:checked + .checkbox>.tick {
	    visibility:visible;
	    font-size:50px;
        position:absolute;
          color:#ff5722;
        left:25px;
        margin-top:-5px; 
	}