Social links reference and CSS design-CodePudding

I'm trying to figure out, how to fix the social links design.

GitHub and Spotify size is different, and seems like Blogger icon is not in reference:

According

CodePudding user response：

Font Awesome v4.7.0 doesn't support the Blogger icon.

Use Font Awesome v6.2.0.

See the snippet below.

.fa-brands {
  padding: 7px;
  font-size: 30px;
  width: 30px;
  height: 30px;
  text-align: center !important;
  align-items: center !important;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook-f {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-github {
  background: #ffffff;
  color: rgb(0, 0, 0);
}

.fa-spotify {
  background: #ffffff;
  color: #1DB954;
}

.fa-blogger {
  background: #fc4f08;
  color: rgb(255, 255, 255);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>