Search code examples
htmlcsslayout

Aligning text and icons in HTML and CSS

click to view image

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.

Like this:

ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT

And not:

ICON TEXT
ICON   TEXT
ICON  TEXT
ICON TEXT
ICON  TEXT


<ul>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
</ul>
Solution

  • Either make all the icons the same width or use the CSS grid.

    ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.width i {
  width: 1.5em;
}

ul.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.5em;
}
ul.grid > li {
  display: contents;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<ul class="width">
  <li><i class="fas fa-envelope"></i> <a href="example.com">envelope</a></li>
  <li><i class="fas fa-graduation-cap"></i> <a href="example.com">graduation-cap</a></li>
  <li><i class="fas fa-school"></i> <a href="example.com">school</a></li>
  <li><i class="fab fa-instagram"></i> <a href="example.com">instagram</a></li>
  <li><i class="fab fa-linkedin-in"></i> <a href="example.com">fa-linkedin-in</a></li>
</ul>
<br>
<ul class="grid">
  <li><i class="fas fa-envelope"></i> <a href="example.com">envelope</a></li>
  <li><i class="fas fa-graduation-cap"></i> <a href="example.com">graduation-cap</a></li>
  <li><i class="fas fa-school"></i> <a href="example.com">school</a></li>
  <li><i class="fab fa-instagram"></i> <a href="example.com">instagram</a></li>
  <li><i class="fab fa-linkedin-in"></i> <a href="example.com">fa-linkedin-in</a></li>
</ul>