CODEWITHSUNDEEP
htmlcss
Onyx
Onyx

Reputation: 5782

Have text that is preceded by an icon be vertically aligned with the text on the next line

As you can see in the code below, the texts on each line starts at a different location because the icons the preceded it have different dimensions which makes the text look messy. What is the best way to make it so that the texts are aligned with each other (meaning they all start from the same spot)?

.iconText {
  margin-left: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<p><i class="far fa-eye"></i><span class='iconText'>Views</span></p>
<p><i class="far fa-comments"></i><span class='iconText'>Comments</span></p>
<p><i class="fas fa-file-download"></i><span class='iconText'>Download</span>></p>
<p><i class="fas fa-tags"></i><span class='iconText'>Tags</span></p>

Upvotes: 0

Views: 37

Answers (2)

Turnip
Turnip

Reputation: 36742

Font Awesome has a built in class to solve this problem. fa-fw (fw = fixed width)

Apply the class to each of the icons and they will occupy the same horizontal space.

https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

.iconText {
  margin-left: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<p><i class="far fa-eye fa-fw"></i><span class='iconText'>Views</span></p>
<p><i class="far fa-comments fa-fw"></i><span class='iconText'>Comments</span></p>
<p><i class="fas fa-file-download fa-fw"></i><span class='iconText'>Download</span>></p>
<p><i class="fas fa-tags fa-fw"></i><span class='iconText'>Tags</span></p>

Upvotes: 1

Mateusz
Mateusz

Reputation: 91

I would set each icon width to some static value for example:

i { width: 1em }

Upvotes: 1

Related Questions