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!

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