Question

所以我是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和Awesome Font 4.7.0 CSS

It's Supposed to be a Circle

Answer 1

您无需担心填充问题-使用.fa可以更好地实现line-height类

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

Answer 2

您可以使用此代码将图标移到中间。

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

Answer 3

您在这里找到解决方法

.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>

希望这会对您有所帮助。

填充不起作用字体真棒徽标

3 个答案: