Comment utiliser Font Awesome pour les cases à cocher etc

Question

J'utilise Font Awesome pour les icônes de mon site Web. Je suis assez nouveau pour HTML & CSS. J'essayais d'utiliser ceci pour les cases à cocher, et j'avais du mal à trouver comment je pourrais l'utiliser pour activer/désactiver la case à cocher et obtenir l'icône approrpiate montrée.

Par exemple; J'utilise les balises ci-dessous pour case à cocher:

<div style="font-size: 24px;"> 
<i id="prime" type="checkbox" class="icon-check-empty"></i>icon-check 
</div> 

J'utilise le ci-dessous jQuery pour changer l'icône lorsque la case est activée/désactivée:

$(".icon-check-empty").click(function(){ 
    $('#prime').removeClass('icon-check-empty'); 
    $('#prime').addClass('icon-check'); 
}); 

Je suis sûr que ce ne serait pas être la façon dont il devrait être utilisé. Pouvez-vous s'il vous plaît me guider quelle devrait être la façon dont il devrait être utilisé.

Pour l'instant; Je veux utiliser les cases à cocher, et mon but est de cocher/décocher la case, et montrer son icône correspondante. Lorsque cochée: icône-vérifier; décoché: icon-check-empty

Veuillez me guider !!

Answer 1

$("yourselector").click(function(){ 
    if($(this).hasClass('icon-check')){ 
     $(this).removeClass('icon-check').addClass('icon-check-empty');} 
    else { 
     $(this).removeClass('icon-check-empty').addClass('icon-check');} 
});​ 

changement yourselector partie que vous souhaitez

Answer 2

Si vous utilisez jQuery, vous pouvez utiliser quelque chose comme ça ..

étendre jQuery:

jQuery.fn.extend({ 
    shinyCheckbox: 
    function() { 
     var setIcon = function($el) { 
     var checkbox = $el.find('input[type=checkbox]'); 
     var iclass = ''; 
     if (checkbox.is(':checked')) { 
      var iclass = 'icon-check'; 
     } else { 
      var iclass = 'icon-check-empty'; 
     } 
     $el.find('i[class^=icon-]').removeClass('icon-check').removeClass('icon-check-empty').addClass(iclass); 
     } 
     this.find('input[type=checkbox]').change(function() { 
     setIcon($(this).parents('label.checkbox')); 
     }); 
     this.each(function(i, el) { 
     setIcon($(el)); 
     }); 
    } 
}); 

$(document).ready(function() { 
    $('label.checkbox').shinyCheckbox(); 
}); 

Et puis utilisez ceci dans votre html:

<label class="checkbox" for="mycheckbox"> 
    <i class="icon-check-empty"></i> 
    <input type="hidden" name="mycheckbox" value="0" /> 
    <input id="mycheckbox" name="mycheckbox" type="checkbox" value="1" checked="checked" /> 
    Meine Checkbox hat einen sehr langen Text 
</label> 

Et certains css de base et vous avez une case à cocher brillante:

input[type="checkbox"] { 
    display: none; 
} 
label.checkbox { 
    cursor: pointer; 
    display: inline-block; 
    margin-left: 1px; 
    padding-left: 15px; /* maybe this is not enough for your font size - remember: it's just an example and not best practice */ 
} 
label.checkbox .icon-check:before, label.checkbox .icon-check-empty:before { 
    margin-left: -15px; 
    padding-right: 3px; 
} 

Answer 3

Voici mon simple CSS-only method:

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

input[type="radio"] + span:before, 
input[type="checkbox"] + span:before { 
    font-family: 'FontAwesome'; 
    padding-right: 3px; 
    font-size: 20px; 
} 

input[type="radio"] + span:before { 
    content: "\f10c"; /* circle-blank */ 
} 

input[type="radio"]:checked + span:before { 
    content: "\f111"; /* circle */ 
} 

input[type="checkbox"] + span:before { 
    content: "\f096"; /* check-empty */ 
} 

input[type="checkbox"]:checked + span:before { 
    content: "\f046"; /* check */ 
} 

L'idée de base est de sélectionner des portées: avant c'est à côté de entrée que vous voulez. J'ai fait un exemple avec les cases à cocher & radios. Si vous utilisez moins/sass, vous pouvez simplement inclure le fichier .icon-glass: avant les déclarations, pour le rendre plus facile à maintenir & modifier.

Comme un côté note, vous pouvez définir le style des choses comme bon vous semble à l'aide de cette méthode, changer de couleur, fond, ombre couleur, icônes, etc.

Vous pouvez obtenir le caractère à ajouter à l'aide du FontAwesome source.

selectivizr prend en charge: avant &: vérifier, donc si vous soutenez IE6-8, utiliser pour soutenir IE6 +:

<!--[if (gte IE 6)&(lte IE 8)]> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"</script> 
<noscript><link rel="stylesheet" href="[fallback css that display:inline-block radios & checkboxes]" /></noscript> 
<![endif]--> 

Answer 4

Voici un exemple tout CSS qui est très propre.

http://jsfiddle.net/8wLBJ/

.checkbox-container { width: 100%; height: 30px; padding: 0 0 0 10px; margin: 5px 0 0 0; border-radius: 3px; background-color: #e5e5e5; } 
.checkbox-container label { float: left; padding: 0; margin-top: 7px; } 
.checkbox-container label .checkBoxTitle {width: 200px; margin-top: -1px; font-size: 12px;} 

.newCheck[type="checkbox"]:not(:checked), .newCheck[type="checkbox"]:checked { position: absolute; left: -9999px;} 
.newCheck[type="checkbox"]:not(:checked) + label, .newCheck[type="checkbox"]:checked + label { width: 150px; position: absolute; cursor: pointer; } 
.newCheck[type="checkbox"]:not(:checked) + label:before, .newCheck[type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: -1px; width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1);} 
.newCheck[type="checkbox"]:not(:checked) + label:after, .newCheck[type="checkbox"]:checked + label:after { content: '\f00c'; font-family: FontAwesome; padding-right: 5px; position: absolute; top: -8px; left: 0; font-size: 20px; color: #555;} 
.newCheck[type="checkbox"]:not(:checked) + label:after { opacity: 0;} 
.newCheck[type="checkbox"]:checked + label:after { opacity: 1;} 
.newCheck[type="checkbox"]:checked + label span, .newCheck[type="checkbox"]:not(:checked) + label span { position:absolute; left:25px; } 

Answer 5

La plupart des solutions de case à cocher fantaisie là-bas ont le défaut de supprimer la case d'entrée d'origine de la manière qu'il ne reçoit pas le focus d'entrée.
Ce n'est pas acceptable pour deux raisons:

1. Vous ne pouvez pas utiliser le clavier (le Tab-key et spacebar) pour accéder à la case à cocher et changer sa valeur.
2. Vous ne pouvez pas appliquer de styles hover et focus sur la case à cocher.

La solution ci-dessus par @konsumer est sympa mais manque la capacité de mise au point d'entrée. Cependant, je suis tombé sur
implementation par @geoffrey_crofte où le focus d'entrée fonctionne. Cependant, il n'est peut-être pas aussi chic que @konsumers

Donc .. J'ai combiné ces deux et mettre un plunker example. Le seul inconvénient de cette solution est que vous devez utiliser un balisage HTML spécifique pour que cela fonctionne:

<input type="checkbox" class="fancy-check" id="myId"/> 
<label for="myId" ><span>The label text</span></label> 

La case à cocher doit être suivie d'une étiquette d'étiquette. La balise label peut alors inclure une balise span incluant le texte de l'étiquette.

J'ai également fait une exigence d'utiliser la classe fancy-check pour les nouveaux styles à appliquer. Cela permet d'éviter que les styles ne détruisent les autres cases de la page qui ne contiennent pas la balise label manquante.

L'exemple est basé sur l'utilisation de polices d'icônes, dans ce cas, il faut utiliser le FontAwesome library.

La feuille de style est ici:

/*Move he original checkbox out of the way */ 
[type="checkbox"].fancy-check { 
    position: absolute; 
    left: -9999px; 
} 
/*Align the icon and the label text to same height using tabl-cell display*/ 
/*If you change the font-size of the text, you may also want to do som padding or alignhment changes here*/ 
.fancy-check ~ label > span { 
    display: table-cell; 
    vertical-align: middle; 
    padding-left: 5px; 
} 
/*The label will contain the icon and the text, will grab the focus*/ 
[type="checkbox"].fancy-check + label { 
    cursor: pointer; 
    display: table; 
} 
/*The icon container, set it to fixed size and font size, the padding is to align the border*/ 
/*If you change the font-size of this icon, be sure to adjust the min-width as well*/ 
[type="checkbox"].fancy-check + label:before { 
    font-family: 'FontAwesome'; 
    display: inline-block; 
    box-sizing: border-box; 
    border: 1px solid transparent; 
    font-size: 22px; 
    min-width: 28px; 
    padding: 2px 0 0 3px; 
} 
/* toggle font awsome icon*/ 
[type="checkbox"].fancy-check:checked + label:before { 
    content: "\f046"; 
} 
[type="checkbox"].fancy-check:not(:checked) + label:before { 
    content: "\f096";  
} 
/*Do something on focus, in this case show dashed border*/ 
[type="checkbox"].fancy-check:focus + label:before { 
    border: 1px dashed #777; 
} 
/*Do something on hover, in this case change the image color*/ 
[type="checkbox"].fancy-check:hover + label:before { 
    color: #67afe5; 
} 

Answer 6

Jetez un oeil à ceci: http://codepen.io/jamesbarnett/pen/yILjk

ici est le code qui a fonctionné pour moi, à partir du lien ci-dessus.

/*** custom checkboxes ***/ 

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

/* to hide the checkbox itself */ 
input[type=checkbox] + label:before { 
    font-family: FontAwesome; 
    display: inline-block; 
} 

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

/* unchecked icon */ 
input[type=checkbox] + label:before {  
    letter-spacing: 10px; 
} 

/* space between checkbox and label */ 
input[type=checkbox]:checked + label:before { 
    content: "\f046"; 
} 

/* checked icon */ 
input[type=checkbox]:checked + label:before { 
    letter-spacing: 5px; 
}