चेकबॉक्स आदि के लिए फ़ॉन्ट विस्मयकारी का उपयोग कैसे करें

Question

मैं अपनी वेबसाइट में आइकन के लिए Font Awesome का उपयोग कर रहा हूं। मैं एचटीएमएल & सीएसएस के लिए काफी नया हूँ। मैं चेकबॉक्स के लिए इसका उपयोग करने की कोशिश कर रहा था, और यह पता लगाने में कठिन समय था कि मैं चेकबॉक्स को सक्षम/अक्षम करने के लिए इसका उपयोग कैसे कर सकता हूं और अनुमोदित आइकन दिखाता हूं।

उदाहरण के लिए; मैं jQuery नीचे का उपयोग कर रहा चिह्न बदलने के लिए जब चेकबॉक्स विकलांग सक्षम किया गया है/

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

:: मैं चेकबॉक्स के लिए नीचे दिए गए टैग का उपयोग कर रहा

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

मुझे यकीन है कि यह नहीं होगा जिस तरह से इसका इस्तेमाल किया जाना चाहिए। क्या आप कृपया मुझे मार्गदर्शन कर सकते हैं कि इसका उपयोग कैसे किया जाना चाहिए।

अभी के लिए; मैं चेक-बॉक्स का उपयोग करना चाहता हूं, और मेरा लक्ष्य चेक-बॉक्स को चेक/अनचेक करना है, और इसे संबंधित आइकन दिखाएं। चेक किए जाने पर: आइकन-चेक; अनचेक: आइकन-चेक-खाली

कृपया मुझे मार्गदर्शन करें !!

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

बदलें yourselector हिस्सा आप

Answer 2

आप jQuery चला रहे हैं आप कुछ इस तरह इस्तेमाल कर सकते हैं इच्छा के रूप में ..

बढ़ाएँ 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(); 
}); 

और फिर में इस का उपयोग आपका एचटीएमएल:

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

और कुछ बुनियादी सीएसएस और आप एक चमकदार चेकबॉक्स है:

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

यहाँ मेरी 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 */ 
} 

मूल विचार फैला चयन करने के लिए है: पहले कि है के बगल में इनपुट आप चाहते हैं। मैंने चेकबॉक्स & रेडियो के साथ एक उदाहरण बनाया। यदि आप कम/सास का उपयोग कर रहे हैं, तो आप केवल 0Cको बनाए रखने के लिए इसे आसान बनाने के लिए, घोषणाओं से पहले, .icon-glass शामिल कर सकते हैं।

अतिरिक्त नोट के रूप में, आप बातें हालांकि आप इस पद्धति का उपयोग पसंद शैली दे सकते हैं, तो रंग, पृष्ठभूमि, छाया रंग, आइकन, आदि

बदल आप FontAwesome source का उपयोग कर जोड़ने के लिए चरित्र मिल सकती है।

selectivizr समर्थन करता है: पहले &: जाँच की, इसलिए यदि आप IE6-8 समर्थन कर रहे हैं, जो प्रयोग 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

यहाँ एक सब सीएसएस उदाहरण बहुत साफ है।

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

फैंसी चेक बॉक्स समाधानों में से कई बाहर वहाँ जिस तरह से है कि यह इनपुट फ़ोकस प्राप्त नहीं होता है में मूल इनपुट चेकबॉक्स को दूर करने के दोष है।
यह दो कारणों से स्वीकार्य नहीं है:

1. आप चेकबॉक्स पर जाएँ और अपने मूल्य बदलने के लिए कुंजीपटल (Tab-key और spacebar) का उपयोग नहीं कर सकते हैं।
2. आप चेकबॉक्स पर होवर और केंद्रित शैलियों को लागू नहीं कर सकते हैं।

@konsumer द्वारा उपरोक्त समाधान अच्छा है लेकिन इनपुट फोकस क्षमता की कमी है। हालांकि मैं
implementation @geoffrey_crofte पर आया जहां इनपुट फ़ोकस काम करता है। हालांकि यह शायद कोंक्यूमर

तो .. जैसा कि मैंने उन दोनों को जोड़ा और plunker example डाला।

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

चेकबॉक्स एक लेबल टैग द्वारा पालन किया जाना चाहिए: इस समाधान के लिए केवल नकारात्मक पक्ष यह है कि आप इस काम करने के लिए के लिए एक विशेष HTML मार्कअप का उपयोग करना चाहिए। label टैग में लेबल टेक्स्ट सहित span टैग शामिल हो सकता है।

मैंने इसे लागू करने के लिए नई शैलियों में कक्षा fancy-check का उपयोग करने की आवश्यकता भी बनाई। यह पृष्ठ में अन्य चेकबॉक्स को नष्ट करने वाली शैलियों से बचने के लिए है, जो आवश्यक हैं, label टैग के बाद।

उदाहरण आइकन फोंट का उपयोग करने पर आधारित है, इस मामले में इसे FontAwesome library की आवश्यकता है।

स्टाइलशीट यहाँ है:

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

इस पर एक नज़र डालें: http://codepen.io/jamesbarnett/pen/yILjk

यहाँ कोड है कि मेरे लिए काम किया, ऊपर के लिंक से है।

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