Wie wird den Beschriftungen eines Kontrollkästchens, das mit benutzerdefinierten Symbolen in CSS angepasst wurde, ein hängender Einzug hinzugefügt?

Question

Ich versuche, das Aussehen meiner Kontrollkästchen mit font-awesome anzupassen und den gesamten Text der Etiketten korrekt eingerückt. Ich habe das Aussehen der Ankreuzfelder angepasst, wodurch die üblichen Ansätze zum Einrücken des Textes nicht funktionieren, da ich das eigentliche Ankreuzfeld ausgeblendet habe (siehe CSS unten).

Derzeit ich erhalten die folgende (links), während ich die auf der rechten Seite möchten:

ich den folgenden Code verwendet wird (siehe die JSFiddle):

CSS

Inspiriert von dieser simple CSS checkboxes, verwende ich die folgenden, um meine Kontrollkästchen wi zu formatieren th font-awesome:

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

HTML

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

Ich habe versucht, die margin-left und text-indent Attribute der label und label:before Selektoren zu modifizieren, aber ohne Erfolg.

Irgendeine Idee, wie ich den richtigen Einzug haben könnte, während ich die schönen font-awesome Icons benutze?

Vielen Dank für Ihre Hilfe!

Answer 1

diesen Stil hinzufügen (getestet sowohl auf Chrome und Firefox)

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

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

---

Endergebnis:

Answer 2

Basierend auf der Antwort von Fabrizio Calderan, Ich habe folgende Änderungen am CSS vorgenommen:

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

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

Der Vorteil ist, dass der Abstand zwischen den Elementen nicht geändert wird. Sie können die Endergebnisse in JSFiddle sehen.

Answer 3

Nach dem Versuch fcalderan 's Vorschlag und nicht in der Lage, die Werte für padding-left und text-indent für verschiedene Browser richtig zu bekommen, wechselte ich zu einer Flexbox. Es ist ziemlich green heutzutage.

Wenn Sie die input/label Paare in div s setzen, wie es von Mozilla empfohlen wird, können Sie sie auf diese Weise Stil.

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>