Как сделать иконки из FontAwesome одинаковой ширины

avatar
liewife
1 июля 2021 в 16:47
146
1
0

У меня есть несколько блоков со значками:

     <div class="contacts__icon">
          <i class="fas fa-phone"></i>                    
     </div>
     <div class="contacts__icon">
          <i class="fas fa-map-marker"></i>                    
     </div>

Для них у меня есть следующий стиль:

        .contacts__icon{
            padding: 15px;
            background-color: #269f58;
            border-radius: 50%;
            color: #fff;
            i{
                font-size: 20px;
            }
        }

Блок должен быть круглым с одинаковым размером, но почему-то значки имеют разную ширину, у меня получается эллипс и круг. как сделать их одного размера? Так как иконки от FontAwesone, пробовал использовать атрибут fa-fw: <i class="fa-fw fas fa-map-marker"></i>, но от этого иконка располагалась не по центру, а с некоторым смещением, что тоже не приятно

Источник

Ответы (1)

avatar
Bert W
1 июля 2021 в 23:16
0

Вы можете добавить ширину и высоту к .contacts__icon, а затем добавить отступы к значкам. Я указал разные правила для обеих иконок, поскольку маркер выглядел немного смещенным влево при использовании того же правила, что и для телефона. Я преобразовал ваш sass в css, чтобы привести пример, но sass будет таким: 

.contacts__icon {
 background-color: #269f58;
 border-radius: 50%;
 color: #fff;
 width: 45px;
 height: 45px;
 margin-bottom: 10px;
 i[class="fas fa-phone"] {
   padding-left: 12px;
   padding-top: 12px;
   font-size: 20px;
 }
 i[class="fas fa-map-marker"] {
 padding-left: 15px;
 padding-top: 12px;
 font-size: 20px;
 }
}



.contacts__icon {
  background-color: #269f58;
  border-radius: 50%;
  color: #fff;
  width: 45px;
  height: 45px;
  margin-bottom: 10px;
}
.contacts__icon i[class="fas fa-phone"] {
  padding-left: 12px;
  padding-top: 12px;
  font-size: 20px;
}

.contacts__icon i[class="fas fa-map-marker"] {
  padding-left: 15px;
  padding-top: 12px;
  font-size: 20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

 <div class="contacts__icon">
          <i class="fas fa-phone"></i>                 
     </div>
<div class="contacts__icon">
          <i class="fas fa-map-marker"></i>                    
     </div>