Social media (follow us)

<h3 id="connect-title" aria-hidden="true">Social media</h3>
<ul class="list-connect"
    aria-labelledby="connect-title">
  <li><a href="#"
          class="fa-icon fab fa-twitter"
          aria-labelledby="label-twitter">
    <span id="label-twitter"
          class="visually-hidden"
          aria-hidden="true">
      Follow us on Twitter
    </span>
  </a></li>
  <li><a href="#"
          class="fa-icon fab fa-linkedin-in"
          aria-labelledby="label-linkedin">
    <span id="label-linkedin"
          class="visually-hidden"
          aria-hidden="true">
      Follow us on LinkedIn
    </span>
  </a></li>
  <li><a href="#"
          class="fa-icon fab fa-instagram"
          aria-labelledby="label-instagram">
    <span id="label-instagram"
          class="visually-hidden"
          aria-hidden="true">
      Follow us on Instagram
    </span>
  </a></li>
  <li><a href="#"
          class="fa-icon fab fa-facebook-f"
          aria-labelledby="label-facebook">
    <span id="label-facebook"
          class="visually-hidden"
          aria-hidden="true">
      Follow us on Facebook
    </span>
  </a></li>
</ul>

.list-connect {
  list-style: none;
  padding: 0;
}

.list-connect > li {
  display: inline;
  margin: .25rem;
}

.list-connect {
  padding-left: 0;
}

.list-connect a[href].fa-icon {
  border: 1px solid #eee;
  outline: 4px solid #eee;
  padding: .5rem;
}

.list-connect a[href].fa-icon:hover,
.list-connect a[href].fa-icon:focus {
  background-color: #004da1;
  border: 1px solid #000;
  color: #eee;
  outline: 4px solid #999;
  padding: .5rem;
}