Replace HTML checkbox by images

by Imabot

HTML

<script src="https://friconix.com/cdn/friconix.js"></script>
<label class="fi-checkbox">
  	<input type="checkbox" checked>
	<i class="fi-cwlrxm-none fi-unchecked"></i>
	<i class="fi-cwsuxm-check fi-checked"></i>
	Rounded checkbox
</label>

<label class="fi-checkbox">
  	<input type="checkbox" checked>
	<i class="fi-unchecked fi-xwluxm-square-checkbox-wide"></i>
	<i class="fi-checked fi-xwluxm-square-checkbox-checked-wide"></i>
	Square checkbox
</label>

<label class="fi-checkbox">
  	<input type="checkbox" checked>
	<i class="fi-unchecked fi-xwluxm-square-checkbox-wide" style="color:orange;"></i>
	<i class="fi-checked fi-xwluxm-square-checkbox-checked-wide" style="color:red;"></i>
	Square colored checkbox
</label>

<label class="fi-checkbox">
  	<input type="checkbox" checked>
	<i class="fi-unchecked fi-xtluxm-square-checkbox-thin"></i>
	<i class="fi-checked fi-xtluxm-square-checkbox-checked-thin"></i>
	Thin square checkbox
</label>

<label class="fi-checkbox">
  	<input type="checkbox" checked>
	<i class="fi-unchecked fi-swllxm-none"></i>
	<i class="fi-checked fi-swluxm-smiley-happy-wide"></i>
	Smiley checkbox
</label>

<label class="fi-checkbox" style="font-size:40px">
  	<input type="checkbox" checked>
	<i class="fi-unchecked fi-swllxl-none"></i>
	<i class="fi-checked fi-swluxl-smiley-sad-wide"></i>
	Big sad smiley checkbox
</label>

CSS

.fi-checkbox {
	font-size: 24px;
	cursor: pointer;
    caret-color: transparent;
	display: block;
	display: flex;
   	align-items: center;
}

i { padding-right: 5px;}


/* Hide the browser's default checkbox */
.fi-checkbox input {
  display: none;
}

/* Hide the checked checkbox */
.fi-checked {
	display: none;
	color:#333;
}

/* Hide the checked checkbox */
.fi-unchecked {
	color:#aaa;
}

/*  Display the checked image when checked */
.fi-checkbox input:checked ~ .fi-checked {
	display: inline;
}

/*  Hide the unchecked image when checked */
.fi-checkbox input:checked ~ .fi-unchecked {
	display: none;
}