Font Awesome社交图标样式修复：尺寸不一致及Blogger图标缺失问题

我正在调整社交链接的样式，目前碰到两个问题：

• GitHub和Spotify图标尺寸和其他图标不一致，明显偏小
• 一开始用Font Awesome 4.7.0时，Blogger图标完全显示不出来

我参考社交媒体按钮教程做的实现，初始引入资源、HTML结构和CSS代码如下：

初始Font Awesome引入代码 #

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

初始HTML结构 #

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-soundcloud"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-github"></a>
<a href="#" class="fa fa-spotify"></a>
<a href="#" class="fa fa-blogger"></a>

初始CSS代码 #

.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);
}

编辑1：升级Font Awesome版本 #

把Font Awesome升级到6.2.0后，Blogger图标能正常显示了，引入代码如下：

<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" />

但GitHub和Spotify图标尺寸偏小的问题还是没解决，参考别人的代码调整后也没用。

编辑2：调整CSS规则 #

修改了.fa-brands的CSS样式：

.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%;
}

结果GitHub和Spotify图标还是偏小；另外如果把Facebook的类名改成class="fa-brands fa-facebook"而不是class="fa-brands fa-facebook-f"，Facebook图标也会变得和它们一样小。

问题截图说明 #

• 初始问题：Blogger图标不显示，GitHub、Spotify图标尺寸明显小于其他图标
• 编辑1后：Blogger图标正常显示，但GitHub、Spotify图标依旧偏小
• 编辑2后：GitHub、Spotify图标尺寸问题无改善
• 类名修改后：Facebook图标也变成和GitHub、Spotify一样小的尺寸

内容的提问来源于stack exchange，提问作者emss