无法获得font-awesome图标的背景信息

Question

因此，我想获得一个字体真棒图标，为我的LinkedIn提供背景。然而，在修改它（从codepen.io）并从fontawesome.com获取图标后。我有社交媒体图标显示，唯一的问题是我希望背景显示鼠标悬停时的颜色，同时排除样式字母或图标“无颜色”。当你将鼠标悬停在facebook vs linkedin上时看到差异。运行代码段以查看我正在谈论的内容。我希望字母“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

只需使用background-color，而不是使用linkedin：hover选择器的color 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>