尝试对齐社交媒体图标，使其在分隔符之间完美居中

<ul class="social-icons">
  <li><a href="#"><i class="fab fa-facebook"></i></a></li>
  <li class="separator">|</li>
  <li><a href="#"><i class="fab fa-twitter"></i></a></li>
  <li class="separator">|</li>
  <li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.social-icons li {
  margin: 0 5px;
}

.social-icons li.separator {
  color: #999;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">