CODEWITHSUNDEEP
htmlcssfont-awesomecloudflare
Azazel
Azazel

Reputation: 593

Can't get background for font-awesome icons

So I am trying to get a font-awesome icon to have background for my LinkedIn. However after modifiying it (from codepen.io) and getting an icon from fontawesome.com. I got the social media icon to show, the only problem is I want the background to show the color when the mouse is on hover while excluding styling the letter or icon "with no-color". See the difference when you hover over facebook vs linkedin. Run the code snippet to see what I'm talking about. I want the letter "in" to be white or empty and swap the color to background instead.

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

Upvotes: 1

Views: 289

Answers (1)

Ivica Pesovski
Ivica Pesovski

Reputation: 847

Just use background-color, instead color css property for the linkedin:hover selector.

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

Upvotes: 0

Related Questions