This page explains how to replace HTML default checkboxes with icons from Friconix. Friconix is a large JavScript collection of vector icon (based on Vector Graphics).
If you don't know Friconix, have a look at the Friconix Quick Start Guide, you'll quickly understand why Friconix is awesome!
Here is the expected result of this page:
To embed the Friconix icons, you need to link the Friconix JavaScript file.
Option 1: in the head section of your HTML, add the following line to include all the icons:
<script defer src="https://friconix.com/cdn/friconix.js"> </script>
Option 2: if you create an account on the Friconix server, you can create boards with only selected icons. This option is a better one for the following reasons:
For this page, I created a board with checkboxes, you can download the file on this page: https://friconix.com/board/169/checkbox/
Whatever option you choose, you should insert the following line in the body of the HTML and see the checkbox appear
<i class="fi-xwlux3-square-checkbox-checked-wide"></i>
Once Friconix library is loaded, use the following HTML to create a checkbox:
<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>
You should see something like:
CSS is the engine under the hood that will manage the user interactions. I will not detail how the CSS works, you can go on this page for more details : Replace HTML checkbox with images. It is the same principle as for the images.
.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;
}
Here is the final result: