CODEWITHSUNDEEP
htmlcsslayout
BeldrNL
BeldrNL

Reputation: 53

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>

Upvotes: 1

Views: 155

Answers (2)

gre_gor
gre_gor

Reputation: 6773

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>

Upvotes: 3

Saikat Roy
Saikat Roy

Reputation: 523

just put those text in a tag like and add a few pixel left padding. that'll work. If you could git some sample code. Explanation would have been easier.

.text{
  padding-left: 20px;
}
    
    <div class="elements">
      <span>🏠</span> 
      <span class="text">Home</span>
    </div>

Upvotes: 0

Related Questions