Блог

Главная - Вопросы по программированию - Значки Font awesome не выровнены правильно

Значки Font awesome не выровнены правильно

#html #css #twitter-bootstrap #font-awesome

#HTML #css #twitter-bootstrap #шрифт -awesome

Вопрос:

У меня есть эти div ниже, где есть значок шрифта с кругом вокруг них. Но они выровнены неправильно, так как ширина не одинакова, поэтому текст не выровнен по вертикали.

Можно ли это исправить, я помню какой-то класс, который я мог бы использовать для его исправления, но не помню имя класса.

 .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>

введите описание изображения здесь

Ответ №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>

Комментарии:

1. @user1186050 нет, этого не будет… Я советую перейти на версию 5, версия 4 уже слишком старая. Версия 6 уже в пути и будет выпущена в ближайшие месяцы

Ответ №2:

Вы можете просто использовать атрибут width и присвоить каждому значку-символу одинаковую ширину.