सीएसएस में कस्टम आइकन के साथ अनुकूलित चेकबॉक्स के लेबल में फांसी इंडेंट कैसे जोड़ें?

Question

मैं फ़ॉन्ट-भयानक का उपयोग करके अपने चेकबॉक्स के रूप को अनुकूलित करने की कोशिश कर रहा हूं और लेबल के सभी पाठों को सही ढंग से इंडेंट किया गया है। मैंने चेकबॉक्स के रूप को अनुकूलित किया है जो टेक्स्ट को इंडेंट करने के लिए सामान्य दृष्टिकोण बनाता है क्योंकि मैं वास्तविक चेकबॉक्स छुपा रहा हूं (नीचे सीएसएस देखें)।

मैं निम्नलिखित कोड (देखें JSFiddle) का इस्तेमाल किया:

वर्तमान में, मैं निम्नलिखित (बाएं), जबकि मैं सही पर आप पाना चाहते हैं प्राप्त सीएसएस

इस simple CSS checkboxes से प्रेरित, मैं अपने चेकबॉक्स को प्रारूपित करने के लिए निम्नलिखित का उपयोग करता हूं wi वें फ़ॉन्ट भयानक:

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

input[type=checkbox] + label:before { 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f096"; 
    letter-spacing: 10px; 
    cursor: pointer; 
} 

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

input[type=checkbox]:checked + label:before { 
    letter-spacing: 8px; 
} 

एचटीएमएल

<input type="checkbox" id="box1" checked=""> 
<label for="box1">Item 1: some long text...</label> 
<br> 
<input type="checkbox" id="box2" checked=""> 
<label for="box2">Item 2: some long text...</label> 
<br> 
<input type="checkbox" id="box3"> 
<label for="box3">Item 3: some long text...</label> 

मैं label और label:before चयनकर्ताओं की, लेकिन किसी भी सफलता के बिना margin-left और text-indent विशेषताओं को संशोधित करने की कोशिश की है।

कोई विचार है कि अच्छे फ़ॉन्ट-भयानक आइकन का उपयोग करते समय मैं सही इंडेंट कैसे प्राप्त कर सकता हूं?

आपकी मदद के लिए बहुत बहुत धन्यवाद!

Answer 1

label { 
    display: block; 
    padding-left: 1.5em; 
    text-indent: -.7em; 
} 

http://jsfiddle.net/tkt4zsmc/2/

---

(क्रोम और Firefox पर दोनों का परीक्षण किया) इस शैली जोड़ें अंतिम परिणाम:

Answer 2

फैब्रिजियो Calderan द्वारा जवाब के आधार पर, मैंने सीएसएस में निम्नलिखित संशोधन का उपयोग किया:

label{ 
    display: inline-block; 
    margin-left: 20px; 
} 

label:before{ 
    margin-left: -23px; 
} 

लाभ यह है कि यह वस्तुओं के बीच अंतर को संशोधित नहीं करता है। आप अंतिम परिणाम JSFiddle में देख सकते हैं।

Answer 3

fcalderan के सुझाव की कोशिश करने के बाद और विभिन्न ब्राउज़र के लिए padding-left और text-indent के मान प्राप्त करने में सक्षम नहीं होने के बाद, मैंने एक फ्लेक्स बॉक्स पर स्विच किया। यह आजकल green सुंदर है।

आप div रों में input/label जोड़े के रूप में यह Mozilla द्वारा सिफारिश की है डाल, तो आप उन्हें इस तरह से शैली दे सकते हैं।

fieldset { 
 
    width: 13ch; 
 
} 
 

 
fieldset > div { 
 
    display: flex; 
 
} 
 

 
fieldset > div > * { 
 
    align-self: baseline; 
 
} 
 

 
fieldset > div > input[type=checkbox] { 
 
    margin: 0 0.5ch 0 0; 
 
    width: 1em; 
 
    height: 1em; 
 
}

<fieldset> 
 
    <legend>Sichtbarkeit</legend> 
 
    <div> 
 
    <input id="c1" checked="" type="checkbox"> 
 
    <label for="c1">Minuten</label> 
 
    </div> 
 
    <div> 
 
    <input id="c2" checked="" type="checkbox"> 
 
    <label for="c2">Nur Minuten, die Vielfache von 5 sind</label> 
 
    </div> 
 
    <div> 
 
    <input id="c3" checked="" type="checkbox"> 
 
    <label for="c3">Stunden</label> 
 
    </div> 
 
    <div> 
 
    <input id="c4" checked="" type="checkbox"> 
 
    <label for="c4">Nur 12 Stunden</label> 
 
    </div> 
 
</fieldset>