如何从 FontAwesome 制作具有相同宽度的图标

Question

我有几个带有图标的块：

     <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> ，但这使得图标不是放在中心而是有一些偏移，这也不令人愉快

Answer 1

您可以为.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>