时间戳

首页 > 解决方案 > Padding Not Working 字体真棒徽标

html - Padding Not Working 字体真棒徽标

问题描述

所以我对 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

应该是一个圆圈

标签： htmlcsstwitter-bootstrapfont-awesomepadding

解决方案

您无需为填充而烦恼-您的.fa课程可以通过以下方式更好地实现line-height

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

推荐阅读