De belles cases à cocher en HTML

Cette page explique comment remplacer les cases à cocher par défaut du HTML avec des icônes du site Friconix. Friconix est une collection d'icônes vectorielles en JavaScript.

Si vous ne connaissez pas Friconix, jettez un oeil au guide de démarrage rapide de Friconix, vous comprendrez rapidement pourquoi Friconix est incroyable !

Voici le résultat espéré de cette page :

Ajouter Friconix dans la page

Pour utiliser les icônes de Friconix, vous devez créer ajouter le fichier JavaScript de Friconix.

Option 1: dans l'en-tête de la page HTML, ajouter la ligne suivante pour pouvoir utiliser les icônes de friconix :

<script defer src="https://friconix.com/cdn/friconix.js"> </script>

Option 2: si vous vous créer un compte Friconix, vous pouvez créer des boards qui ne contiendront que les icônes donc vous avez besoin. Cette seconde options est préférable car :

Vous enregistrez le fichier sur votre serveur
Le fichier est plus léger car il ne contient que les icônes dont vous avez besoin.

Pour cette page, j'ai créé une board avec les cases à cocher. Vous pouvez télécharger le fichier sur cette page : https://friconix.com/board/169/checkbox/

Quelque soit l'option choisie, vous devriez maintenant pouvoir insérer la ligne suivante dans le corps (<body>) de la page HTML. L'icône d'une case à cocher devrait apparaître.

<i class="fi-xwlux3-square-checkbox-checked-wide"></i>

HTML

Une fois que la bibliothèque Friconix est chargée, insérer le code HTML suivant pour créer une case à cocher :

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

Vous devriez obtenir un rendu similaire à celui ci-dessous :

CSS

Le CSS est ici le moteur sous le capot qui va gérer les interactions avec l'utilisateur. Je ne vais pas détailler comment le CSS fonctionne, mais je vous invite à vous rendre sur cette page pour plus de détails : Replace HTML checkbox with images. C'est le même principe que pour les 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;
}

Voici le résultat final :

Try it online

Voir aussi

Dernière mise à jour : 02/10/2022