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

Question

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> 

Answer 1

我将每个图标的宽度设置为某个静态值，例如：

i { width: 1em }

Answer 2

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>