How to add hanging indent to the labels of a checkbox customized with custom icons in CSS?

Question

I am trying to customize the look of my checkboxes using font-awesome and to have all the text of the labels correctly indented. I have customized the look of the checkboxes which makes the usual approaches to indent the text not working as I am hiding the actual checkbox (see the CSS below).

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

I used the following code (see the JSFiddle):

CSS

Inspired by this 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 have tried to modify 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 indent while using the nice font-awesome icons?

Thank you very much for your help!

Solution 1

Add this style (tested both on Chrome and Firefox)

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

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

---

Final result:

Solution 2

After trying fcalderan's suggestion and not being able to get the values for padding-left and text-indent right for different browsers, I switched to a flex box. It is pretty green nowadays.

If you put the input/label pairs in divs as it is recommended by Mozilla, you can style them this 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>

Solution 3

Based on the answer by Fabrizio Calderan, I used the following modifications to the CSS:

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

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

The advantage is that it does not modify the spacing between the items. You can see the final results in JSFiddle.

Comments

[nbeuchat]

Perfect, this is exactly what I needed! I just need to adjust the margin at the bottom now. Thanks a lot!

[Trevor]

This is absolutely the modern solution to this problem! So many CSS issues of old are so easily solved with flexbox.

[bwbecker]

In my application the size of the checkbox scaled (got smaller) as the available width decreased. Fixed by adding min-width to the input[type=checkbox].

[Fpckalk]

To avoid the checkbox getting smaller add flex-shrink: 0 to the checkbox. This is the flex way of preventing a flex item getting smaller.