真棒字体图标，悬停时在图标（文本）中间更改颜色

Question

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:

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:

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 1

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.

Answer 2

<a class="fa fa-facebook-square" href="https://www.facebook.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank"></a>

to

<a class="" href="https://www.facebook.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank">
  <i class="fa fa-facebook-square" style="
    color: #337ab7;
"></i>
</a>

And you can give the < a > tag's background color to transparent. After that, you can give < i > tags color as your reqeust.

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

to

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

Answer 3

or you can use this

            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-facebook fa-stack-1x"></i>
            </span>

you can modify the icon size by modifying font size.