title: Aligning text and icons in HTML and CSS
body: <p><a href="https://i.stack.imgur.com/j8Y0r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j8Y0r.png" alt="click to view image" /></a></p>
  <p>I want it so all the icons are where they are and the text to the right needs more space between the icon and the text so all text starts at the same place.</p>
  <p>Like this:</p>
  <pre><code>ICON  TEXT
  ICON  TEXT
  ICON  TEXT
  ICON  TEXT
  ICON  TEXT
  ICON  TEXT
  </code></pre>
  <p>And not:</p>
  <pre><code>ICON TEXT
  ICON   TEXT
  ICON  TEXT
  ICON TEXT
  ICON  TEXT
  
  
  &lt;ul&gt;
  &lt;li&gt;&lt;i class&quot;fa fa-icon&quot;&gt;&lt;/i&gt; &lt;a href=&quot;example.com&quot;&gt;Example&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i class&quot;fa fa-icon&quot;&gt;&lt;/i&gt; &lt;a href=&quot;example.com&quot;&gt;Example&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i class&quot;fa fa-icon&quot;&gt;&lt;/i&gt; &lt;a href=&quot;example.com&quot;&gt;Example&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i class&quot;fa fa-icon&quot;&gt;&lt;/i&gt; &lt;a href=&quot;example.com&quot;&gt;Example&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i class&quot;fa fa-icon&quot;&gt;&lt;/i&gt; &lt;a href=&quot;example.com&quot;&gt;Example&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>