Padding Not Working 字体真棒徽标答案

【问题标题】：Padding Not Working Font Awesome LogosPadding Not Working 字体真棒徽标
【发布时间】：2018-11-29 17:08:35
【问题描述】：

所以我对 HTML 和 CSS 有点陌生，所以我的问题可能有一个非常明显的答案。我的问题是我的社交媒体图标的正确填充不起作用。它们位于 div 内，向左浮动（Bootstrap 默认设置）。

.fa {
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  border-radius: 100%
}

.fa:hover {
  opacity: 0.7;
}

.content2 {
  text-align: center;
}


/* Facebook */

.fa-facebook {
  background: #3B5998;
  color: white;
}


/* Twitter */

.fa-twitter {
  background: #55ACEE;
  color: white;
}


/*Google*/

.fa-google {
  background: #dd4b39;
  color: white;
}


/*Instagram*/

.fa-instagram {
  background: #125688;
  color: white;
}

<h2>Or Alternatively, You can Contact Us Via Our Social Media Shown Below.</h2>
<div class="col-md-4 col-md-offset-4">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-google"></a>
</div>
</div>
</div>

附加信息：

使用 Bootstrap 3.3.7 和 Font Awesome 4.7.0 CSS

It's Supposed to be a Circle

【问题讨论】：

顺便说一句，如果有人需要完整的代码，我会链接他们
你怎么知道它是正确的填充？
width 50px = 20px padding-left + icon space ---> 没有更多的地方 padding-right （因为引导程序正在添加box-sizing:border-box）

标签： html css twitter-bootstrap font-awesome padding

【解决方案1】：

您无需费心填充 - 您的 .fa 类可以通过 line-height 更好地实现

.fa {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  border-radius: 100%;
  text-decoration: none;
}

【讨论】：

【解决方案2】：

给你一个解决方案

.fa {
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  border-radius: 100%;
}

.fa:hover {
  opacity: 0.7;
}

.content2 {
  text-align: center;
}


/* Facebook */

.fa-facebook {
  background: #3B5998;
  color: white;
}


/* Twitter */

.fa-twitter {
  background: #55ACEE;
  color: white;
}


/*Google*/

.fa-google {
  background: #dd4b39;
  color: white;
}


/*Instagram*/

.fa-instagram {
  background: #125688;
  color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet"/>
<h2>Or Alternatively, You can Contact Us Via Our Social Media Shown Below.</h2>
<div class="col-md-4 col-md-offset-4">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-google"></a>
</div>
</div>
</div>

希望这会对你有所帮助。

【讨论】：

Facebook 的“f”周围的圆圈看起来有点……压扁了。这是要发生的吗？

【解决方案3】：

您可以使用此代码将您的图标放在中间。

.fa {
    font-size: 30px;
    width: 50px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    border-radius: 100%;
    line-height: 48px;
}

【讨论】：