input[type=radio].with-font{
	 display: block;   float: left; font-size: 1.2em;
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
	 
} 
 
input[type=radio].with-font ~ label:before{
    font-family: FontAwesome;
    display: block;   float: left;
    content: "\f1db"; 
    
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;
}
input[type=radio].with-font:checked ~ label:before{
   content: "\f192";  
	 
    font-size: 1.2em;
    letter-spacing: 5px;
}    
 input[type=checkbox].with-font {
	 display: block;   float: left; font-size: 1.2em;
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
	 
}
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: block;   float: left;
    content: "\f1db"; 
    
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;  
}

 
input[type=checkbox].with-font:checked ~ label:before{
   content: "\f00c"; 
	 
    font-size: 1.2em;
    letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {        
    content: "\f096"; display: block;   float: left;font-size: 1.2em;
}
input[type=checkbox].with-font:checked ~ label:before {
    content: "\f046"; display: block;   float: left; font-size: 1.2em;    
   
}
<!---s  white -->
  
<!--e white -->
input[type=radio].withcheck-font {
	 display: block;   float: left; font-size: 1.2em;
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
	 
}
input[type=radio].withcheck-font ~ label:before {
    font-family: FontAwesome;
    display: block;   float: left;
    content: "\f1db"; 
    
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;  
}

 
input[type=radio].withcheck-font:checked ~ label:before{
   content: "\f00c"; 
	 
    font-size: 1.2em;
    letter-spacing: 5px;
}
input[type=radio].withcheck-font ~ label:before {        
    content: "\f096"; display: block;   float: left;font-size: 1.2em;
}
input[type=radio].withcheck-font:checked ~ label:before {
    content: "\f046"; display: block;   float: left; font-size: 1.2em;    
   
}

 .cta {
	padding: 50px 0;
	color: #fff;
	font-size: 24px;
	background: #f65100;
	line-height: 42px;
	text-align: center;
	position: relative;
	z-index: 1000;
}
.cta a {
	color: #fff;
	font-size: 20px;
}
.cta2 { 
padding:10px;
  	-webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: 	0px 0px 12px 2px rgba(0,0,0,0.1);
	box-shadow: 		0px 0px 12px 2px rgba(0,0,0,0.1);
	border: 1px solid #ddd;
	transition: all .1s ease-in-out;
}
.cta2:hover {
	padding:10px;
	-webkit-box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 	0px 0px 13px 3px rgba(0,0,0,0.2);
	box-shadow: 		0px 0px 13px 3px rgba(0,0,0,0.2);
	border: 1px solid #f65100;
	transform: scale(1.05);
}