web-dev-qa-db-fra.com

Cases à cocher avec polices Awesome 5 icons

Quelqu'un a-t-il déjà conçu des cases à cocher avec une police géniale 5 icônes à l'intérieur?

Je l'ai déjà googlé et trouvé que des exemples pour FA-4 comme http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/

J'ai mis à jour vers FA5 et ai eu d'autres choses avec des pseudo-éléments CSS à exécuter, mais à l'intérieur d'une case à cocher, cela ne fonctionne pas. Je suis ouvert à d'autres solutions sans pseudo-éléments.

Merci d'avance!

Fiddle-Exemples:

Fiddle avec FA-4.7

/* Checkboxes */

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

.checkbox label {
  padding-left: 0;
}

.checkbox label:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-family: "FontAwesome";
}

.checkbox input[type="checkbox"]:checked+label::before {
  content: "\f00c";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="checkbox">
  <input type="checkbox" id="profile_notifications" value="" checked/>
  <label for="profile_notifications">
    I agree
  </label>
</div>

Fiddle avec FA-5

/* Checkboxes */

.checkbox {
  padding-left: 10px;
  padding-top: 10px;
}

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

.checkbox label {
  padding-left: 0;
}

.checkbox label:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-family: "Font Awesome 5 Solid";
  
}

.checkbox input[type="checkbox"]:checked+label::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f00c";
}

.test {
  padding-left: 10px;
  padding-top: 10px;
}
.test .pseudo-element:before {
  display: none;
  font-family: "Font Awesome 5 Solid";
  content: "\f00c";
}
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<script>
    window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

<div class="checkbox">
  <input type="checkbox" id="profile_notifications" value="" checked/>
  <label for="profile_notifications">
    Doesn't work!
  </label>
</div>

<div class="test">
  <label class="pseudo-element">This works!</label>
</div>

cssfont-awesomepseudo-elementfont-awesome-5
4
markus_Redmine

Utiliser les icônes Font Awesome 5 comme case à cocher

Il suffit de changer le poids de la police.

input[type='checkbox'] {display:none;}
input[type='checkbox'] + label:before {
  font-family: 'Font Awesome 5 Free';
  display: inline-block;
}
/* unchecked */
input[type='checkbox'] + label:before { 
  content: "\f00c";
  font-weight:100;
}
/* checked */
input[type='checkbox']:checked + label:before {font-weight:900;}
2
andyJK

Ce qui précède n'a pas fonctionné pour moi. J'utilise Bootstrap 3.3.7 (testé aussi avec bootstrap 3.4.0) et la police impressionnante 5.5.0 gratuite . Ce qui a fonctionné pour moi est de l'ajouter à mon fichier css personnalisé:

/* To get rid of the original and the benefit of not having the blue outline on focus */
input[type='checkbox'], input[type='radio'] {
    display:none;
}
.checkbox input[type='checkbox'] + label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00c";
    color: #fff;
}
/* font weight is the only important one. The size and padding makes it look nicer */
.checkbox input[type='checkbox']:checked + label:before {
    font-weight:900;
    font-size: 10px;
    padding-left: 3px;
    padding-top: 0px;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
    content: "";
}

EDIT: Il semble que lorsque vous mettez ce type de case à cocher dans un .input-group-addon, la marge autour de la case à cocher et le remplissage à l'intérieur de la case à cocher: before sont légèrement décalés. Alors j'utilise ceci:

.input-group-addon .checkbox, .input-group-addon .radio {
    margin-top: 0px;
    margin-bottom: 0px;
}
.input-group-addon .checkbox input[type='checkbox']:checked + label:before {
    font-weight:900;
    font-size: 10px;
    padding-left: 2px;
    padding-top: 2px;
}
1
MarcM