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-unchecked fi-xwluxm-square-checkbox-wide"></i>
    <i class="fi-checked fi-xwluxm-square-checkbox-checked-wide"></i>
    Text of the checkbox
</label>

CSS

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

.fi-checkbox 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;
}