[英]Have text that is preceded by an icon be vertically aligned with the text on the next line
正如您在下面的代碼中看到的那樣,每行文本從不同的位置開始,因為前面的圖標具有不同的尺寸,這使文本看起來很混亂。 使文本彼此對齊(即它們都從同一位置開始)的最佳方法是什么?
.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>
我將每個圖標的寬度設置為某個靜態值,例如:
i { width: 1em }
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.