Comment remplacer le Checkbox par un icone fontawesome

février 8, 2020février 9, 2020 Thomas Aucun commentaire

Nous avons discuté précédemment sur comment personnaliser les boutons checkbox avec CSS pour donner aux checkbox un aspect plus agréable et plus satisfaisant. Presque immédiatement, les gens nous demande comment ils pouvaient faire la même chose avec un icone de Font Awesome. Voici les résultats :

Dans cet exemple, nous allons voir comment faire une Checkbox pour activer/désactiver les notifications.

Exemple 1: Sans utiliser un icone FontAwesome

<html>
<head></head>
<body style="font-size: 2em;">
    <label>
        <input type="checkbox" />Notification
    </label>
</body>
</html>

Résultat:

Exemple 2: Remplacer le Checkbox par un icone FontAwesome

Commençons par présenter du HTML. Nous allons utiliser FontAwesome ici pour obtenir des icônes amusantes pour remplacer notre Checkbox par défaut, alors commençons par l’inclure dans notre code HTML.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Ensuite, nous allons ajouter la classe CSS « fancy-checkbox » à l’élément « label », afin que nous puissions utiliser les Checkbox par défaut à d’autres endroits. Ajoutons ensuite deux icônes FontAwesome. Un pour représenter l’activation et un pour représenter la désactivation.

<label class="custom-checkbox">
    <input type="checkbox" />
    <i class="fa fa-fw fa fa-bell-o unchecked"></i>
    <i class="fa fa-fw fa fa-bell-slash-o checked"></i>
    Notification
</label>

Ensuite, nous devons ajouter le style CSS. Notez que nous avons également ajouté les classe “checked” et “unchecked” à chacune des icônes pour indiquer dans quel état nous allons l’utiliser. D’abord on masque le checkbox par défaut et masquons également l’icône « .checked », car l’état par défaut du checkbox n’est pas coché.

.fancy-checkbox input[type="checkbox"],
.custom-checkbox .checked {
	display: none;
}

Enfin, nous devons ajouter du CSS pour gérer l’état « checked » du checkbox. Pour cela, nous utilisons le sélecteur CSS3 « :checked » pour cibler uniquement les checkbox qui sont cochées. Ensuite, nous pouvons cibler les icônes, en utilisant le sélecteur « ~ ». Lorsqu’une checkbox est cochée, nous souhaitons simplement masquer l’icône « .unchecked » et afficher l’icône « .checked ».

.custom-checkbox input[type="checkbox"]:checked~.checked {
	display: inline-block;
}

.custom-checkbox input[type="checkbox"]:checked~.unchecked {
	display: none;
}

Code complet:

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-size: 2em;
        }
        
        .custom-checkbox input[type="checkbox"],
            .custom-checkbox .checked {
            display: none;
        }
 
        .custom-checkbox input[type="checkbox"]:checked ~ .checked
        {
            display: inline-block;
        }
 
        .custom-checkbox input[type="checkbox"]:checked ~ .unchecked
        {
            display: none;
        }
    </style>
</head>
<body>
<label class="custom-checkbox">
    <input type="checkbox" />
    <i class="fa fa-fw fa fa-bell-o unchecked"></i>
    <i class="fa fa-fw fa fa-bell-slash-o checked"></i>
    Notification
</label>
</body>
</html>

Résultat:

Vous trouverez plus d’icons sur FontAwesome que vous pouvez utiliser.

Pour avoir des icônes de cases à cocher rondes, utiliser les classes fa-circle-o et fa-check-circle-o:

Pour avoir des icônes de cases à cocher sous forme de carré, utiliser les classes fa-square-o et fa-check-square-o: