无法获得字体真棒图标的背景

Question

所以我正在尝试为我的 LinkedIn 制作一个字体很棒的图标。但是在修改它（来自 codepen.io）并从 fontawesome.com 获得一个图标之后。我要显示社交媒体图标，唯一的问题是我希望背景在鼠标悬停时显示颜色，同时排除字母或图标的样式“无颜色”。当您将鼠标悬停在 facebook 与linkedin 上时，请查看差异。 运行代码 sn-p 看看我在说什么。我希望字母 "in" 是白色或空的并交换改为背景颜色。

#lab_social_icon_footer {
  padding: 40px 0;
  /* background-color: #dedede; */
}

#lab_social_icon_footer a {
  color: #333;
}

#lab_social_icon_footer .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#lab_social_icon_footer .social {
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}


/*
    Multicoloured Hover Variations
*/

#lab_social_icon_footer #social-li:hover {
  color: #4875B4;
}

#lab_social_icon_footer #social-fb:hover {
  color: #3399ff;
}

#lab_social_icon_footer #social-em:hover {
  color: #f39c12;
}

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

<section id="lab_social_icon_footer">
  <div class="container">
    <div class="text-center center-block">
      <a href="#"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
      <a href="#"><i id="social-li" class="fa fa-linkedin fa-3x social"></i></a>
      <a href="mailto:#"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
    </div>
  </div>
</section>

Answer 1

对于linkedin:hover 选择器，只需使用背景颜色，而不是颜色css 属性。

#lab_social_icon_footer {
  padding: 40px 0;
  /* background-color: #dedede; */
}

#lab_social_icon_footer a {
  color: #333;
}

#lab_social_icon_footer .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#lab_social_icon_footer .social {
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}


/*
    Multicoloured Hover Variations
*/

#lab_social_icon_footer #social-li:hover {
  background-color: #4875B4;
  border-radius: 10px;

}

#lab_social_icon_footer #social-fb:hover {
  color: #3399ff;

}

#lab_social_icon_footer #social-em:hover {
  color: #f39c12;
}

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

<section id="lab_social_icon_footer">
  <div class="container">
    <div class="text-center center-block">
      <a href="#"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
      <a href="#"><i id="social-li" class="fa fa-linkedin fa-3x social"></i></a>
      <a href="mailto:#"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
    </div>
  </div>
</section>