正如您在下面的代码中看到的,每一行的文本都从不同的位置开始,因为它前面的图标具有不同的尺寸,这使得文本看起来很乱。使文本彼此对齐(意味着它们都从同一点开始)的最佳方法是什么?
.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>
最佳答案
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>
关于html - 将前面带有图标的文本与下一行的文本垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53070641/