Как поместить иконки в центр границы

body {
  background-color: #000;
}

.wrapper {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  display: inline-table;
  margin-right: 450px;
}


/* Style the Un-order list by setting its list-style to none */

.wrapper ul {
  list-style: none;
}


/* Style the list items inside the UL list, by setting its width, height and line-height 
  and float them to left and set its border and border-radius.
 */

.wrapper ul li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0 10px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  border: 5px solid #D8E2DC;
  float: left;
  transition: all 0.5s ease;
}


/* Style the icons by setting its color and margin-top value to 20px 
to align it properly */

.wrapper ul li .fa {
  color: #D8E2DC;
  transition: all 0.5s ease;
}


/* Now target the specific li classes for styling and use box-shadow effect to border and text-shadow effect
  to icons for glowing effect and use transition property for smooth transition effect. */


/*facebook*/

.wrapper ul li:hover.facebook {
  border: 5px solid #3b5998;
  box-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-facebook {
  color: #3b5998;
  text-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}


/*twitter*/

.wrapper ul li:hover.twitter {
  border: 5px solid #00aced;
  box-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-twitter {
  color: #00aced;
  text-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}


/* instagram */

.wrapper ul li:hover.instagram {
  border: 5px solid #bc2a8d;
  box-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-instagram {
  color: #bc2a8d;
  text-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

@media screen and (max-width: 640px) {
  .wrapper {
    width: 350px;
  }
  .wrapper ul li {
    margin-top: 10px;
  }
  .wrapper ul li.google {
    margin-left: 60px;
  }
}

@media screen and (max-width: 340px) {
  .wrapper {
    width: 150px;
  }
  .wrapper ul li {
    margin: 15px;
  }
  .wrapper ul li.google {
    margin-left: 15px;
  }
}

.facebook a,
.twitter a,
.instagram a {
  line-height: 40px;
  vertical-align: top;
}

.facebook .fa,
.twitter .fa,
.instagram .fa {
  line-height: 40px;
}

.wrapper ul {
  margin-top: 50px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="wrapper">
  <ul>
    <li class="facebook"><a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a></li>
    <li class="twitter"><a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
    <li class="instagram"><a href="#"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
  </ul>
</div>