字體真棒圖標未正確對齊

Question

我有這些 div 下面有一個字體 swesome 圖標，周圍有一個圓圈。 但是由於寬度不同，它們沒有正確對齊，因此文本沒有垂直對齊。

這個可以修復嗎，我記得一些我可以用來修復它的類，但不記得類名。

 .circle-icon { background: #e3f4f6; padding: 10px; border-radius: 50%; }

 <div> <span><i class="fa fa-user fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Like<ng-container *ngIf="member.reviews > 1">s</ng-container> </span> </div> <div> <span><i class="fa fa-star fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Review<ng-container *ngIf="member.reviews > 1">s</ng-container> </span> </div> <div> <span><i class="fa fa-check fa-lg rating-color mr-2 circle-icon" aria-hidden="true"></i></span> <span>Verified</span> </div>

Answer 1

使用堆疊圖標： https : //fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

 .fa-circle { color: #e3f4f6; }

 <script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script> <div> <span class="fa-stack fa-1x"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-user fa-stack-1x" aria-hidden="true"></i> </span> <span>10 Likes</span> </div> <div> <span class="fa-stack fa-1x"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-star fa-stack-1x" aria-hidden="true"></i> </span> <span>8 Reviews </span> </div> <div> <span class="fa-stack fa-1x"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-check fa-stack-1x" aria-hidden="true"></i> </span> <span>Verified</span> </div>

也適用於 CSS 版本：

 .fa-circle { color: #e3f4f6; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <div> <span class="fa-stack fa-1x"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-user fa-stack-1x" aria-hidden="true"></i> </span> <span>10 Likes</span> </div> <div> <span class="fa-stack fa-1x"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-star fa-stack-1x" aria-hidden="true"></i> </span> <span>8 Reviews </span> </div> <div> <span class="fa-stack fa-1x"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-check fa-stack-1x" aria-hidden="true"></i> </span> <span>Verified</span> </div>

Answer 2

您可以簡單地使用寬度屬性並為每個 cricle-icon 賦予相同的寬度。