Почему контур моего фокуса имеет такую ​​форму?

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>