title: How to align list Items with font-awesome icon next line text?
body: <p><img src="https://i.stack.imgur.com/wHOBV.png" alt="Align font-awesome icon list item with span"></p>
  
  <p>A picture paints a thousand words. The text on the next line needs to align on same margin as above.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;
  &lt;p&gt;&lt;em class="fa fa-square"&gt;&lt;/em&gt;&lt;span&gt;Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme&lt;/span&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul{
      display: table;
      a{
          padding-left: 10px;
      }
      span{
          padding-left: 10px;
      }
  }
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>After @panther update: </p>
  
  <p><img src="https://i.stack.imgur.com/YSPJf.png" alt="Aligning list items with font-awesome line breaks"></p>
  
  <p>It is acceptable, however the fontawesome icon is now off centre.</p>