Cómo utilizar Font Awesome para casillas de verificación, etc.

Question

Estoy usando Font Awesome para los iconos en mi sitio web. Soy bastante nuevo en HTML & CSS. Intenté usar esto para las casillas de verificación, y tuve dificultades para descubrir cómo podría usarlo para habilitar/deshabilitar la casilla de verificación y obtener el ícono de la aplicación que se muestra.

Por ejemplo; Estoy usando las etiquetas debajo de casilla:

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

estoy usando el siguiente jQuery para cambiar el icono cuando la casilla de verificación está activada/desactivada:

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

Estoy seguro de que esto no lo haría ser el camino de cómo debería ser utilizado. ¿Puede por favor guiarme cuál debería ser la forma en que debería usarse?

Por ahora; Quiero usar las casillas de verificación, y mi objetivo es marcar/desmarcar la casilla de verificación y mostrar su icono correspondiente. Cuando está marcado: icon-check; desmarcado: icon-check-empty

Por favor, guíame !!

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');} 
});​ 

Cambio yourselector parte como desee

Answer 2

Si está ejecutando jQuery que podría utilizar algo como esto ..

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

y luego usar esto en su 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> 

Y un poco de CSS básico y tiene una casilla de verificación 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

Aquí es mi 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 */ 
} 

La idea básica consiste en seleccionar vanos: antes de eso es junto a entrada que deseas. Hice un ejemplo con casillas de verificación & radios. Si usa less/sass, puede incluir el .icon-glass: before declarations, para que sea más fácil mantener & modify.

Como nota lateral, puede estilo de cosas como usted quiera que utilizan este método, por lo que cambiar el color, el fondo, sombra color, iconos, etc.

Usted puede obtener el carácter añadir usando el FontAwesome source.

selectivizr apoya: antes &: comprobado, por lo que si usted está apoyando IE6-8, utilizar eso para apoyar 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

Aquí está un ejemplo todos los CSS que es muy limpio.

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

Muchas de las soluciones de fantasía casilla de verificación por ahí tiene el defecto de la eliminación de la casilla de entrada original en la forma en que no recibe el foco de entrada.
Esto no es aceptable por dos razones:

1. no puede utilizar el teclado (el Tab-key y spacebar) para desplazarse a la casilla de verificación y cambiar su valor.
2. No puede aplicar el cursor y los estilos enfocados en la casilla de verificación.

La solución anterior de @konsumer es buena, pero le falta la capacidad de enfoque de entrada. Sin embargo me encontré con
implementation por @geoffrey_crofte donde funciona el enfoque de entrada. Sin embargo, tal vez no es tan elegante como @konsumers

Así que ... Combiné esos dos y saqué plunker example. La única desventaja de esta solución es que se debe usar un lenguaje de marcado HTML específica para que esto funcione:

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

La casilla debe ir seguido de una etiqueta etiqueta. La etiqueta label puede incluir una etiqueta span que incluya el texto de la etiqueta.

También solicité el uso de la clase fancy-check para los nuevos estilos que se aplicarán. Esto es para evitar que los estilos destruyan otras casillas de verificación de la página que no cumplan con los requisitos, siguiendo la etiqueta label.

El ejemplo se basa en el uso de fuentes de iconos, en este caso requiere el FontAwesome library.

La hoja de estilo está aquí:

/*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

Tome un vistazo a esto: http://codepen.io/jamesbarnett/pen/yILjk

Este es el código que trabajó para mí, desde el enlace anterior.

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