时间戳

首页 > 解决方案 > FA 符号看起来很奇怪

html - FA 符号看起来很奇怪

问题描述

悬停前的图标

悬停在链接上

我在页脚中添加了一些 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>

标签： htmlcssfrontend

解决方案

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

为了让图标居中，这个片段在锚元素上使用了 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>

推荐阅读