loading

JohnnyBEHAGUE

Télécharger mon CV

Personnaliser une checkbox HTML avec FontAwesome

Bonjour à tous!

Aujourd’hui nous allons voir comment modifier une checkbox pour la rendre plus esthétique via l’ajout d’une icône FontAwesome.

Cela peut avoir plusieurs utilités, comme par exemple gérer un menu dit « burger », où notre icône sera une checkbox qui affichera le menu selon son état : ceci sera l’objet d’un prochain article 🙂

Pourquoi ce tutoriel ?

J’ai décidé de faire ce petit article car je me rends compte que cela peut être un sujet bloquant (mes étudiants seront amenés à implémenter ce genre de chose). Il existe bien sûr plusieurs articles sur Internet relatant le sujet, mais je trouve que pour la plupart, ils n’expliquent pas de manière détaillée pour que ce soit accessible aux débutants. Et puis, je préfère qu’un maximum de tutoriels soient accessibles en français! 🙂

Voyons déjà comment procéder pour notre cas présent.

Etape 1 : Ajout des éléments

Nous allons tout d’abord créer notre code HTML, qui va contenir uniquement un checkbox.

<input id="ma_checkbox" name="ma_checkbox" type="checkbox" />

Pour l’instant, rien d’extraordinaire. Nous allons ensuite lui ajouter un label, qui va contenir notre icône FontAwesome.

<input id="ma_checkbox" name="ma_checkbox" type="checkbox" />
<label for="ma_checkbox"><i class="fas fa-check-square"></i></label>

Le problème ici est double :

  • lorsque nous cliquons sur notre élément FontAwesome,l’icône reste la même
  • La checkbox est affiché en plus de l’icône FontAwesome

Corrigons ça tout de suite!

Etape 2 : Un petit peu de CSS

Nous allons employer ici un autre moyen d’intégrer l’icône pour pouvoir la changer via CSS : nous allons utiliser le pseudo élément :before du label. Il nous suffira de dire que nous voulons utiliser la police FontAwesome, et utiliser le code hexadécimal de notre icône, que l’on retrouve sur le site de FontAwesome, sur la même page que notre balise <i>.

Le code héxadécimal que nous allons utilisé est ici f14a, surligné en jaune

Nous allons dans un premier temps intégrer l’icône via le pseudo élément :before, pour s’assurer qu’il n’y a pas de régression avant d’aller plus loin.

input[type=checkbox] + label:before {
font-family: FontAwesome;
}

input[type=checkbox] + label:before {
content: "\f14a";
}

Et maintenant, en supprimant notre balise <i> dans le label, nous avons le même résultat qu’avant : parfait!

Nous allons nous attaquer maintenant à un notre point : changer l’icône en fonction de l’état de la checkbox. Maintenant que l’on a implémenté l’icône via CSS, cela devient plus simple !

input[type="checkbox"]:not(:checked) + label:before {
content: "\f0c8";
}

input[type="checkbox"]:checked + label:before {
content: "\f14a";
}

Et voilà, le tour est joué!

Etape 3 : Finalisation de la checkbox

La dernière étape est de cacher notre checkbox, et de laisser visible le label. Encore une fois, ça se passe côté CSS, et cela est à nouveau très simple :

input[type=checkbox] {
display: none;
}

Et voilà, c’est fini, notre checkbox est complètement customisé!

Conclusion

Comme vous pouvez le voir, cette implémentation n’est pas compliqué, il suffit juste d’être méthodique et y aller par étape. Une fois qu’on a compris l’astuce du pseudo élément, tout devient  plus simple!

Le code de ce tutoriel est disponible sur CodePen.

A la prochaine, et bon développement 🙂

Leave a comment