使带有图标的文本与下一行的文本垂直对齐

Question

正如您在下面的代码中看到的那样，每行文本从不同的位置开始，因为前面的图标具有不同的尺寸，这使文本看起来很混乱。 使文本彼此对齐（即它们都从同一位置开始）的最佳方法是什么？

 .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具有内置类来解决此问题。 fa-fw （fw =固定宽度）

将类应用于每个图标，它们将占据相同的水平空间。

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>