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

【问题标题】：How to make icons from FontAwesome with same width如何从 FontAwesome 制作具有相同宽度的图标
【发布时间】：2021-09-13 18:02:04
【问题描述】：

我有几个带有图标的块：

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

【问题讨论】：

标签： html css sass icons font-awesome

【解决方案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>

【讨论】：