Question

因此，我试图获取字体真棒的图标，使我的LinkedIn具有背景。但是，修改后（从codepen.io 中获取）并从 fontawesome.com 中获取图标。我显示了社交媒体图标，唯一的问题是我希望背景在鼠标悬停时显示颜色，同时不设置字母或图标“无颜色” 的样式。当您将鼠标悬停在Facebook和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; }

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

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

1 个答案: