Dejell Dejell - 6 months ago 62
CSS Question

FontAwesome for checkbox

I am trying to use FontAwesome for checkbox - so in unchecked state - it will display Trash icon, and in checked state, it will display the same icon but in red color.

I added the font-awesome.min.css and the fonts.


<div class="delete-checkbox">
<input type="checkbox" id="checkbox-delete-6053923167078">


.delete-checkbox input[type="checkbox"] {
display: none;

.delete-checkbox span:before {
font-family: "FontAwesome";
font-style: normal;
width: 1em;
height: 1em;
content: '\f014';
margin-right: .3em;

.delete-checkbox input[type="checkbox"]:checked ~ span:before {
color: red;

I do see in the result the trash icon, however, it's not clickable and when I click on it, it doesn't turn red.

How can I do it?


You will need to use JavaScript.

Replace your <span></span> with the following:

<span onclick="document.getElementById('checkbox-delete-6053923167078').checked = !document.getElementById('checkbox-delete-6053923167078').checked"></span>

Or, if you are using jQuery, you can use this:

<span onclick="$('#checkbox-delete-6053923167078').prop('checked', !$('#checkbox-delete-6053923167078').prop('checked'));"></span>