How to Style CSS Checkboxes with Font Awesome

We have previously discussed how to customize the checkbox buttons with CSS to give the checkboxes a more pleasant and satisfying look. Almost immediately, people ask us how they could do the same thing with a Font Awesome icon. Here are the results:

In this example, we will see how to make a Checkbox to enable/disable notifications.

Example 1: Without using a FontAwesome icon

<html>
<head></head>
<body style="font-size: 2em;">
    <label>
        <input type="checkbox" />Notification
    </label>
</body>
</html>

Résultat:

Example 2: Replace the Checkbox with a FontAwesome icon

Let’s start by presenting HTML. We’re going to use FontAwesome here to get some fun icons to replace our default Checkbox, so let’s start by including it in our HTML code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Next, we’re going to add the “fancy-checkbox” CSS class to the “label” element, so that we can use the default checkboxes in other places. Next, let’s add two FontAwesome icons. One to represent activation and one to represent deactivation.

<label class="custom-checkbox">
    <input type="checkbox" />
    <i class="fa fa-fw fa fa-bell-o unchecked"></i>
    <i class="fa fa-fw fa fa-bell-slash-o checked"></i>
    Notification
</label>

Next, we need to add the CSS styling. Note that we have also added the “checked” and “unchecked” class to each of the icons to indicate in which state we will use it. First we hide the default checkbox and also hide the “.checked” icon, because the default state of the checkbox is not checked.

.fancy-checkbox input[type="checkbox"],
.custom-checkbox .checked {
	display: none;
}

Finally, we need to add CSS to handle the “checked” state of the checkbox. For this, we use the CSS3 selector “: checked” to target only the checkboxes that are checked. Then we can target the icons, using the “~” selector. When a checkbox is checked, we just want to hide the “.unchecked” icon and show the “.checked” icon.

.custom-checkbox input[type="checkbox"]:checked~.checked {
	display: inline-block;
}

.custom-checkbox input[type="checkbox"]:checked~.unchecked {
	display: none;
}

Complete Code:

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-size: 2em;
        }
        
        .custom-checkbox input[type="checkbox"],
            .custom-checkbox .checked {
            display: none;
        }
 
        .custom-checkbox input[type="checkbox"]:checked ~ .checked
        {
            display: inline-block;
        }
 
        .custom-checkbox input[type="checkbox"]:checked ~ .unchecked
        {
            display: none;
        }
    </style>
</head>
<body>
<label class="custom-checkbox">
    <input type="checkbox" />
    <i class="fa fa-fw fa fa-bell-o unchecked"></i>
    <i class="fa fa-fw fa fa-bell-slash-o checked"></i>
    Notification
</label>
</body>
</html>

Result:

You will find more icons on FontAwesome that you can use.

To have round checkbox icons, use the fa-circle-o and fa-check-circle-o classes:

To have square-shaped checkbox icons, use the fa-square-o and fa-check-square-o classes:

2 thoughts on “How to Style CSS Checkboxes with Font Awesome”

Mike Finch

August 13, 2021 at 10:35 pm

Interesting. But, since the element has a display of none, it cannot be clicked. So, how you toggle the value of the element between false and true?
Mike Finch

August 13, 2021 at 10:37 pm

The tags I entered in my previous comment were eliminated. What I meant to say was…

Interesting. But, since the input element (i.e., the one that represents the checkbox) has a display of none, it cannot be clicked. So, how do you toggle the value of the checkbox between false and true?

Example 1: Without using a FontAwesome icon

Example 2: Replace the Checkbox with a FontAwesome icon

Complete Code:

You May Also Like

How to write comments in HTML

How to Resize Background Images with CSS3

How to Place Two DIVs with Same Height Side by Side in CSS

2 thoughts on “How to Style CSS Checkboxes with Font Awesome”

Leave a Reply Cancel reply