title: How to add hanging indent to the labels of a checkbox customized with custom icons in CSS?
body: <p>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).</p>
  
  <p>Currently, I obtain the following (left) while I would like the one on the right:</p>
  
  <p><img src="https://i.stack.imgur.com/WUo3L.png" alt="Current view">
  <img src="https://i.stack.imgur.com/D9ZJ4.png" alt="Desired view"></p>
  
  <p>I used the following code (see the <a href="http://jsfiddle.net/tkt4zsmc/" rel="noreferrer">JSFiddle</a>):</p>
  
  <p><strong>CSS</strong></p>
  
  <p>Inspired by this <a href="http://codepen.io/jamesbarnett/pen/yILjk" rel="noreferrer">simple CSS checkboxes</a>, I use the following to format my checkboxes with font-awesome:</p>
  
  <pre><code>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;
  } 
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="checkbox" id="box1" checked=""&gt;
  &lt;label for="box1"&gt;Item 1: some long text...&lt;/label&gt;
  &lt;br&gt;
  &lt;input type="checkbox" id="box2" checked=""&gt;
  &lt;label for="box2"&gt;Item 2: some long text...&lt;/label&gt;
  &lt;br&gt;
  &lt;input type="checkbox" id="box3"&gt;
  &lt;label for="box3"&gt;Item 3: some long text...&lt;/label&gt;
  </code></pre>
  
  <p>I have tried to modify the <code>margin-left</code> and <code>text-indent</code> attributes of the <code>label</code> and <code>label:before</code> selectors but without any success.</p>
  
  <p>Any idea how I could have the correct indent while using the nice font-awesome icons?</p>
  
  <p>Thank you very much for your help!</p>