title: Font Awesome list padding
body: <p>I am having some difficulties with the Font Awesome list markers. I am using the solution provided in docs:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul li {
    padding: 10px 0;
    border-bottom: dotted 1px #222;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
  &lt;ul class="fa-ul"&gt;
    &lt;li&gt;&lt;i class="fa fa-li fa-check-square"&gt;&lt;/i&gt;List Item&lt;/li&gt;
    &lt;li&gt;&lt;i class="fa fa-li fa-check-square"&gt;&lt;/i&gt;List Item&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the <a href="http://jsfiddle.net/fknfe8xq/" rel="nofollow">fiddle</a></p>
  
  <p>The problem is with the padding. If I set padding on the <code>&lt;li&gt;</code> element, the <code>&lt;i&gt;</code> element does not receive the padding setting.</p>
  
  <p>Thanks.</p>