input[type=radio].with-font,
input[type=checkbox].with-font {
	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,
input[type=checkbox].with-font ~ label:before {
	font-family: FontAwesome;
	display: inline-block;
	content: "\f1db";
	letter-spacing: 10px;
	font-size: 1em;
	color: #535353;
	width: 1.2em;
}

input[type=radio].with-font:checked ~ label:before,
input[type=checkbox].with-font:checked ~ label:before  {
	content: "\f00c";
	font-size: 1em;
	color: darkgreen;
	letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {
	content: "\f096";
}
input[type=checkbox].with-font:checked ~ label:before {
	content: "\f046";
	color: darkgreen;
}
input[type=radio].with-font:focus ~ label:before,
input[type=checkbox].with-font:focus ~ label:before {
	color: green;
}