title: Social links reference and CSS design
body: <p>I'm trying to figure out, how to fix the social links design.</p>
  <p>GitHub and Spotify size is different, and seems like Blogger icon is not in reference:</p>
  <p><a href="https://i.stack.imgur.com/7j4Hr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7j4Hr.jpg" alt="enter image description here" /></a></p>
  <p>According <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_social_media_buttons" rel="nofollow noreferrer">How To Create Social Media Buttons - W3Schools</a> librarie reference:</p>
  <pre><code> &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
  </code></pre>
  <p>HTML specific list, also must be updated with other social network links:</p>
  <pre><code>&lt;a href=&quot;#&quot; class=&quot;fa fa-facebook&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;fa fa-instagram&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;fa fa-youtube&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;fa fa-twitter&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;fa fa-soundcloud&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;fa fa-linkedin&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;fa fa-github&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;fa fa-spotify&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;fa fa-blogger&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>and CSS:</p>
  <pre><code>.fa {
      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 {
      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);
   }
    
  </code></pre>
  <p><strong>edit 1:</strong></p>
  <p>Blogger icon appears with 6.2.0 version:</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css&quot; integrity=&quot;sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;
  /&gt;
  </code></pre>
  <p>but for some reason, the same code from <a href="https://stackoverflow.com/users/10347145/cervus-camelopardalis">@Cervus camelopardalis</a> answer looks different in my browser, and GitHub and Spotify icons are still smaller than other icons as in the answer snippet too:</p>
  <p><a href="https://i.stack.imgur.com/vOMvc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vOMvc.jpg" alt="enter image description here" /></a></p>
  <p><strong>edit 2:</strong></p>
  <p>With the edit in <code>CSS</code>:</p>
  <pre><code>.fa-brands {
    padding: 5px;
    padding-left: 1px;
    padding-right: 1px;
    font-size: 20px;
    width: 30px;
    height: 30px;
    text-align: center !important; 
    text-decoration: none;
    border-radius: 50%;
  }
  </code></pre>
  <p>but GitHub and Spotify icons are a smaller then others:</p>
  <p><a href="https://i.stack.imgur.com/WtdSa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WtdSa.jpg" alt="enter image description here" /></a></p>
  <p>and if I use <code>class=&quot;fa-brands fa-facebook</code> instead <code>class=&quot;fa-brands fa-facebook-f</code> than the Facebook icon is also small like GitHub and Spotify icons:</p>
  <p><a href="https://i.stack.imgur.com/k0Agw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k0Agw.jpg" alt="enter image description here" /></a></p>