Nice HTML checkbox

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).

Large collection of vector icons for web developpers

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:

Add Friconix to your 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>

HTML

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

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:

See also


Last update : 10/02/2022