HappyHands31 HappyHands31 - 1 year ago 88
CSS Question

Font-Awesome Icons, Change Color In The Middle of The Icon (The Text) On Hover

This question is pretty similar to one that's already been asked, except that I'm trying to change the text-color of the icon only when you hover over it.

Right now, hovering over the icons looks like this:

enter image description here

Although the color is correct, you can see that it's extending outside of the icon. Here's my HTML:

<div id="social-media-container">
<li class="social-media">
<a class="fa fa-facebook-square"
href="https://www.facebook.com/gatewaywebdesign18/?ref=aymt_homepage_panel"
target="blank"></a>
</li>
<li class="social-media">
<a class="fa fa-twitter-square"
href="https://www.twitter.com/gatewaywebdesign18/?ref=aymt_homepage_panel"
target="blank"></a>
</li>
<li class="social-media">
<a class="fa fa-linkedin-square"
href="https://www.linkedin.com/gatewaywebdesign18/?ref=aymt_homepage_panel"
target="blank"></a>
</li>
</div>


And my CSS:

#social-media-container {
position: relative;
float: right;
margin-top: 10px;
}

.social-media a {
color: #ffffff;
display: table-cell;
font-size: 25px;
padding: 0px;
}

.social-media a:hover {
text-decoration:none;
background-color: #1971b9;
border-radius: 5px;
}


I've tried to adjust the border radius on
.social-media a:hover
but it's still extending past the icon:

enter image description here

I've also tried to adjust the padding of
.social-media a:hover
, but no effect. This website is live here: http://nowordpress.gatewaywebdesign.com/. I tried to create a JSFiddle but it looks like it won't load the external resource (font-awesome.min.css). Any suggestions? Thanks.

EDIT: Link to working JS Fiddle with loaded font-awesome stylesheet.

Answer Source

This is also solvable by using Font Awesome's stack system, just like in the link you mentioned:

<a href="https://www.facebook.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank">
  <span class="fa-stack icon-facebook">
    <i class="fa fa-square fa-stack-1x outside"></i>
    <i class="fa fa-facebook fa-stack-1x inside"></i>
  </span>
</a>

And the CSS:

.social-media a .fa-stack {
  font-size: 13px;
}

.social-media a .outside {
  font-size: 25px;
}

.social-media a .inside {
  font-size: 17px;
  color: #1B3764;
}

.social-media a:hover .inside {
  color: #1971b9;
}

#social-media-container {
  position: relative;
  margin-top: 10px;
  background-color: #1B3764;
}

.social-media a {
  color: #ffffff;
  display: table-cell;
  font-size: 25px;
  padding: 0px;
}

.social-media a .fa-stack {
  font-size: 13px;
}

.social-media a .outside {
  font-size: 25px;
}

.social-media a .inside {
  font-size: 17px;
  color: #1B3764;
}

.social-media a:hover .inside {
  color: #1971b9;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="social-media-container">
  <li class="social-media">
    <a href="https://www.facebook.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank">
      <span class="fa-stack icon-facebook">
        <i class="fa fa-square fa-stack-1x outside"></i>
        <i class="fa fa-facebook fa-stack-1x inside"></i>
      </span>
    </a>
  </li>
  <li class="social-media">
    <a href="https://www.twitter.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank">
      <span class="fa-stack icon-twitter">
        <i class="fa fa-square fa-stack-1x outside"></i>
        <i class="fa fa-twitter fa-stack-1x inside"></i>
      </span>
    </a>
  </li>
  <li class="social-media">
    <a href="https://www.linkedin.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank">
      <span class="fa-stack icon-linkedin">
        <i class="fa fa-square fa-stack-1x outside"></i>
        <i class="fa fa-linkedin fa-stack-1x inside"></i>
      </span>
    </a>
   </li>
</div>

This will change only the inner color.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download