Custom checkbox style for contact form 7

checkbox.js

$('.wpcf7-acceptance label').on('click', function(event) {
	if($('input[type=checkbox]').attr('checked')) {
		  $(this).toggleClass('checked');
	}
});

checkbox.scss

// Editable region
.wpcf7-form {
  .wpcf7-acceptance {
    label {
			&.checked:after {
				font-family: $icons; // using fontello's icons for the font family
				content: '\e802'; // icon font
				color: $red; // Color variable
		  }
   }
}
// Default for checkbox
.wpcf7-form {
  .wpcf7-acceptance {
		span.wpcf7-list-item {
			margin: 0;
		}
		label {
			&:before,
			&:after {
				content: '';
				position: absolute;
				width: 20px;
				height: 20px;
				line-height: 20px;
				text-align: center;
			  	left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			&:before {
				border:2px solid $text_blue;
				border-radius: 2px;
			}
			input[type="checkbox"] {
				visibility: hidden;
			}
			position: relative;
			cursor: pointer;
		}
	}
}

I'm using the forms acceptance on this example.
Should be easy to modify for other checkboxes as they'll use the same structure.