为什么我的焦点轮廓像这样？

Question

我使用的是Font-Awesome图标，当我选择使用焦点时，它会显示为轮廓。

为什么它不是传统的正方形/矩形？

**按要求添加的其余代码。带有visited，hover和active伪类的所有图标，以及<div>，其名称为footer.icons。

.footer-icons {
  margin-top: 20px;
  margin-bottom: 40px;
}

.facebook  {
  color: #3A5998;
  font-size: 1.5em;
  padding: 12px 18px 12px 18px;
  border: 2px solid #3A5998;
  border-radius: 7px;
  &:visited {
    color: inherit;
  }
  &:hover {
    color: $tertiary-color;
    background-color: #3A5998;
    transition: all .25s ease 0s;
  }
  &:active {
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 0 2px 4px rgba(0,0,0,0.2);
  }
}
.twitter  {
  color: #55ACEE;
  font-size: 1.5em;
  padding: 12px;
  border: 2px solid #55ACEE;
  border-radius: 7px;
  &:visited {
    color: inherit;
  }
  &:hover {
    color: $tertiary-color;
    background-color: #55ACEE;
    transition: all .25s ease 0s;
  }
  &:active {
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 0 2px 4px rgba(0,0,0,0.2);
  }
}
.youtube  {
  color: #E52C27;
  font-size: 1.5em;
  padding: 12px 11px 12px 11px;
  border: 2px solid #E52C27;
  border-radius: 7px;
  &:visited {
    color: inherit;
  }
  &:hover {
    color: $tertiary-color;
    background-color: #E52C27;
    transition: all .25s ease 0s;
  }
  &:active {
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 0 2px 4px rgba(0,0,0,0.2);
  }
}
.instagram  {
  color: #E44060;
  font-size: 1.5em;
  padding: 12px 14px 12px 14px;
  border: 2px solid #E44060;
  border-radius: 7px;
  &:visited {
    color: inherit;
  }
  &:hover {
    color: $tertiary-color;
    background-color: #E44060;
    transition: all .25s ease 0s;
  }
  &:active {
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 0 2px 4px rgba(0,0,0,0.2);
  }
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<div class="footer-icons">
  <a href="https://www.facebook.com/PebbleBeachResorts/"><i class="fab fa-facebook-f facebook" title="Facebook"></i></a>
  <a href="https://twitter.com/attproam?lang=en"><i class="fab fa-twitter twitter" title="Twitter"></i></a>
  <a href="https://www.youtube.com/subscription_center?add_user=pebblebeachresorts"><i class="fab fa-youtube youtube" title="YouTube"></i></a>
  <a href="https://www.instagram.com/pebblebeachresorts/?hl=en"><i class="fab fa-instagram instagram" title="Instagram"></i></a>
</div>