Bigger HTML Checkboxes with Font Awesome and CSS

How the heck do you make HTML checkboxes bigger???

The answer is NOT changing the font-size or height/width properties, if that’s what you were thinking…

Instead, there’s a nice little hack we can use with CSS and Font Awesome. If you’re unfamiliar with Font Awesome, it’s a great resource for using font icons in your web projects.

To include Font Awesome in your projects, you can add this HTML to the head of your web page(s):

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

Let’s start with the HTML

<label class="label-big-check">
	<input type="checkbox" value="1" name="option_1" id="option_1">
	<label for="option_1" class="check-title">Option 1</label>
</label>
<!--/.label-big-check-->

<label class="label-big-check">
	<input type="checkbox" value="1" name="option_2" id="option_2">
	<label for="option_2" class="check-title">Option 2</label>
</label>
<!--/.label-big-check-->

<label class="label-big-check">
	<input type="checkbox" value="1" name="option_3" id="option_3">
	<label for="option_3" class="check-title">Option 3</label>
</label>
<!--/.label-big-check-->

As you can see, we have 3 labels each with a child input for the checkbox, and an additional label for the checkbox title. I know… label within a label? Trust me, we need this 🙂

Now, the CSS

/* big check labels */
.label-big-check {
	position: relative;
	display: block;
	padding: 15px 0 15px 35px;
	margin: 0;
	border-top: 1px solid #eee;
	cursor: pointer;
}
.label-big-check input {
	display: none;
}
.label-big-check .check-title {
	font-size: .9em;
	font-weight: 700;
	cursor: pointer;
}
.label-big-check input[type="checkbox"] + .check-title:before {
	position: absolute;
	top: 12px;
	left: 0;
	width: 30px;
	font-family: FontAwesome;
        content: "\f096";
        font-size: 2em;
        line-height: 1;
        color: #aaa;
}
.label-big-check input[type="checkbox"]:checked + .check-title:before {
    content: "\f14a";
    color: #333;
}

This CSS is a little tricky ricky, so here’s a breakdown of how it works:

• First, we hide the actual checkbox input using display: none.
• Next, we use the css :before pseudo property to display a Font Awesome square icon in place of the checkbox input.
• Finally, we use the css :checked selector to change the Font Awesome icon to the checked square.

Here’s a screenshot of what your end result should look like.

And that’s all there is too it. A simple and clean way to do bigger HTML checkboxes with Font Awesome and CSS.