Checkbox Icons

Adjust the look of your checkbox item with an icon

by Jon Fuller

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="your-class">
	<input name="choice" type="checkbox" value="Add More" id="choice">
	<label for="choice" id="choice">Add More</label>
</div>

CSS

body {
	font-family: sans-serif;
}

.your-class {
	position: relative;
}
.your-class input[type="checkbox"] {
	visibility: hidden;
}
.your-class input[type="checkbox"] + label {
	text-transform: uppercase;
	cursor: pointer;
	position: absolute;
	left: 0;
	padding: 10px;
	background-color: rgba(0,0,0,0.1);
	border-radius: 5px;
	color: blue;
}
.your-class input[type="checkbox"] + label::before {
	content: '+';
	font-family: "Font Awesome";
	content: '\f067';
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	color: blue;
	width: 20px;
	text-align: center;
	margin-right: 5px;
}
.your-class input[type="checkbox"]:checked + label {
	background-color: blue;
	color: white;
	box-shadow: inset 0 1px 5px 0 rgba(0,0,0,0.75);
}
.your-class input[type="checkbox"]:checked + label::before {
	content: '\f055';
	color: white;
}