Comment faire pour utiliser la Police Génial pour les cases à cocher, etc

Je suis en utilisant Police Impressionnant pour les icônes dans mon site web. Je suis assez nouveau dans le HTML & CSS. J'ai essayé de l'utiliser pour les cases à cocher, et avait des difficultés à trouver comment je pourrais l'utiliser pour activer /désactiver la case à cocher et obtenir le approrpiate icône s'affiche.

Par Exemple; je suis en utilisant le dessous des tags pour la case à cocher:

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

Je suis en utilisant le dessous de jQuery pour le changement de l'icône lorsque la case à cocher 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 la façon dont il doit être utilisé. Pouvez-vous svp me guider à ce que devrait être la façon dont il doit être utilisé.

Pour l'instant, je veux utiliser les cases, et mon objectif est de cocher/décocher la case, et de lui montrer de l'icône correspondante. Lorsque la case est cochée: icon-check ; case non cochée: icon-check-vide

Merci de me guider !!

alt-checkbox.starikovs.com est un excellent exemple de ce que vous cherché. C'est un plugin jQuery qui permet de le style des cases à cocher avec l'Icône Polices et CSS.

InformationsquelleAutor user1460887 | 2012-06-27

8
```
$("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 le cadre que vous le souhaitez
- Ce court toujours dans la partie. Je suppose que le :vérifié la propriété n'est pas disponible pour mon entrée de l'élément. Pouvez vous s'il vous plaît voir où je vais mal. Merci beaucoup !!
- Mise à jour de ma réponse, vu que vous êtes en utilisant la Police Impressionnant
- Génial !! Vous avez fait ma journée 🙂
InformationsquelleAutor Ghokun
48

Voici mon simple CSS seule méthode:
```
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 travées:avant que c'est à côté de d'entrée que vous voulez. J'ai fait un exemple avec des cases à cocher & les radios. Si vous utilisez less/sass, vous pouvez simplement inclure la .icône de verre:avant de déclarations, pour rendre tout cela plus facile à entretenir & modifier.

Comme une note, vous pouvez définir le style mais les choses que vous aimez à l'aide de cette méthode, pour changer de couleur, arrière-plan de l'ombre, couleurs, icônes, etc.

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

selectivizr prend en charge :avant & :vérifié, donc si vous êtes à l'appui IE6-8, de l'utilisation que le soutien d'IE6+:
```

```
- ne pas changer la taille de police dans la durée:avant et que la police a la même taille que le entourée de l'élément.
- La police-taille de la ligne de mieux que d'utiliser une taille de police de l'élément d'origine (si c'est le bootstrap par défaut.)
- et le line-up est pire si vous avez une plus grande ou plus petite taille de police que vous utilisez.. vous pouvez également utiliser em je. e.: 1.2 em...
- Ouai, si vous ne voulez pas les plus gros éléments, n'hésitez pas à ne définir qu'une seule ligne. Ce n'est pas "mauvais", même si, comme c'est juste un exemple de style comme vous le souhaitez en utilisant uniquement CSS, qui à mon avis est plus élégante que les autres réponses. Vous pouvez bien évidemment changer de look quand vous le voulez, laisser tomber une taille de police, ou à ce que l'icône que vous voulez, comme illustré ici: jsfiddle.net/8PYJg/7
- Excellent. Il est intéressant de noter que la case à cocher glyphes dans font-awesome 4.0.3 sont différentes tailles, de sorte que l'étiquette se déplace lorsque vous cliquez dessus, c'était un peu rageant pour comprendre: jsfiddle.net/zacharyyates/yyvBP (par exemple, plus quelques autres styles)
- Je l'ai résolu comme ceci: jsfiddle.net/yyvBP/9
- Parfait!
- J'ai fait un bootstrap3-version, en utilisant uniquement les glyphicons police, ici. Il n'est pas directement la réponse à la question d'origine, mais ceux qui sont intéressés qui pourrait trouver utile.
- Vous êtes un génie, monsieur! Je viens d'ajouter quelques display:inline-block; width:3em; au lieu de padding-rightpour une largeur fixe
- Cette méthode est en effet compliqué, mais vous devez être conscient qu'il a un défaut. Le contrôle d'entrée n'est plus reçoit le focus. Cela signifie qu'en vol stationnaire et active effets ne montrent pas, et même pire: Vous ne pouvez pas utiliser la touche tab pour passer à la case. Pour cette question JQuery implémentations sont préférables à la CSS de mise en œuvre.
- Quelqu'un m'a signalé un post montrant fantaisie cases css solution où la touche tab est pris en charge: codepen.io/CreativeJuiz/stylo/zqKtp
InformationsquelleAutor konsumer
11

Beaucoup de fantaisie case à cocher des solutions à l'extérieur il y a la faille de la suppression de l'entrée d'origine dans la boite de façon à ne pas recevoir 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 naviguer jusqu'à la case et modifier sa valeur.
2. Vous ne pouvez pas appliquer de pointage et de concentré de styles sur la case à cocher.
La solution ci-dessus par @konsumer est sympa mais manque le focus d'entrée capacité.
Cependant je suis tombé sur

la mise en œuvre
par @geoffrey_crofte où le focus d'entrée œuvres. Toutefois, il est peut-être pas aussi chic que @konsumers

Donc.. j'ai combiné ces deux et de mettre un plunker exemple.
Le seul inconvénient de cette solution est que vous devez utiliser une balise html, 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 par une balise d'étiquette. Le label balise puis peut inclure un span étiquette, y compris le texte de l'étiquette.

J'ai aussi fait une obligation d'utiliser la classe fancy-check à la de nouveaux styles afin d'être appliquée. C'est pour éviter les styles de détruire les autres cases à cocher dans la page qui manque de l', à la suite de label tag.

L'exemple est basé sur l'utilisation de l'icône polices de caractères, dans ce cas, il nécessite la FontAwesome bibliothèque.

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;
}
```
- J'ai juste incorporé dans un projet, fonctionne vraiment bien! J'ai utilisé Fontello au lieu de FontAwesome, mais cela a fonctionné assez bien, sans accroc. J'ai également étendu votre css pour gérer les boutons radio.
- Thx pour cela, je l'ai aussi utilisé dans mon projet et je suis très heureux avec elle.
- Je bifurquais cette solution de travail dynamique avec des tailles de police trop: plnkr.co/modifier/i5aqNtt3VTwTg0u21DCV?p=preview
InformationsquelleAutor Svakinn

Si vous utilisez jQuery, vous pouvez utiliser quelque chose comme cela..

É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();
});

Puis de les utiliser dans votre code 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 un brillant case à cocher:

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

désolé, je suis sens "certains css de base"...

InformationsquelleAutor iRaS

Prendre un coup d'oeil à ceci: http://codepen.io/jamesbarnett/pen/yILjk

voici 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; 
}

InformationsquelleAutor fernandodof

Voici un tout CSS exemple 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; }

Vous devriez sans doute expliquer l'idée principale derrière la solution.

InformationsquelleAutor Rich Oren

Vous devez vous connecter pour publier un commentaire.