How to add hanging indentation to checkbox shortcuts configured with custom icons in CSS?

Question

I am trying to customize the appearance of my checkboxes using font-awesome so that all the text of the labels is indented correctly. I customized the appearance of the checkboxes, which makes the usual approach to jabbering when the text is not working, as I hide the actual flag (see below).

Currently, I am getting the following (on the left), while I would like the one on the right:

I used the following code (see JSFiddle ):

CSS

Inspired by these simple CSS checkboxes, I use the following to format my checkboxes with 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> 

I tried to change the margin-left and text-indent attributes of the label and label:before selectors, but without any success.

Any idea how I could have the correct indentation when using nice font icons?

Many thanks for your help!

Answer 1

Add this style (tested in both Chrome and Firefox)

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

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

---

Final result:

Answer 2

Based on Fabrizio Calderana's answer, I used the following CSS changes:

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

The advantage is that it does not change the distance between the elements. Final results can be seen in JSFiddle .

Answer 3

After trying fcalderan and not getting the values ​​for padding-left and text-indent on the right for different browsers, I switched to a flexible frame. Now it's pretty green .

If you put input / label pairs in a div , as recommended by Mozilla , you can create them that way.

 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>