FA 符号看起来很奇怪答案

【问题标题】：FA symbol looks weirdFA 符号看起来很奇怪
【发布时间】：2021-10-31 21:38:12
【问题描述】：

我在页脚中添加了一些 fa 图标，并为它们添加了悬停效果，但它看起来像蛋形并且奇怪地居中。有解决办法吗？

  footer{
        color: #fff;
        background-color: #313131;
        padding: 20px;
    }
    footer .fa {
        padding: 20px;
      font-size: 30px;
      width: 50px;
      text-align: center;
      text-decoration: none;
        background: #313131;
        color: #fff;
        
        transition: ease-in 0.3s;
        border-radius: 50%;
      }
      
     
      .fa:hover {
        background: #fff;
        color: #313131;
      }
      #copyright{
          float: right;
      }

 <footer>
    <div class="container">
      <a href="#" class="fa fa-instagram"></a>
      <a href="#" class="fa fa-facebook"></a>
      <p id="copyright">&copy Anđelo Motika, 2021</p>
    </div>
  </footer>

【问题讨论】：

您是否尝试过在本地托管字体？

标签： html css frontend

【解决方案1】：

要获得圆形，您需要具有相等的高度和宽度。

为了让图标居中，这个 sn-p 在锚元素上使用了 inline-flex。

footer {
  color: #fff;
  background-color: #313131;
  padding: 20px;
}

a {
  text-decoration: none;
}

footer .fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  height: 50px;
  background: #313131;
  color: #fff;
  transition: ease-in 0.3s;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.fa:hover {
  background: #fff;
  color: #313131;
}

#copyright {
  float: right;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<footer>
  <div class="container">
    <a href="#" class="fa fa-instagram"></a>
    <a href="#" class="fa fa-facebook"></a>
    <p id="copyright">&copy Anđelo Motika, 2021</p>
  </div>
</footer>

【讨论】：