title: Font-Awesome Icons, Change Color In The Middle of The Icon (The Text) On Hover
body: <p>This question is pretty similar to <a href="https://stackoverflow.com/questions/32120902/font-awesome-icons-change-color-in-the-middle-of-the-icon-the-text">one that's already been asked</a>, except that I'm trying to change the text-color of the icon only when you hover over it.  </p>
  
  <p>Right now, hovering over the icons looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/2ygdB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ygdB.png" alt="enter image description here"></a></p>
  
  <p>Although the color is correct, you can see that it's extending outside of the icon. Here's my HTML:</p>
  
  <pre><code>&lt;div id="social-media-container"&gt;
      &lt;li class="social-media"&gt;
          &lt;a class="fa fa-facebook-square"
                         href="https://www.facebook.com/gatewaywebdesign18/?ref=aymt_homepage_panel"
                         target="blank"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="social-media"&gt;
          &lt;a class="fa fa-twitter-square"
                         href="https://www.twitter.com/gatewaywebdesign18/?ref=aymt_homepage_panel"
                         target="blank"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="social-media"&gt;
          &lt;a class="fa fa-linkedin-square"
                         href="https://www.linkedin.com/gatewaywebdesign18/?ref=aymt_homepage_panel"
                         target="blank"&gt;&lt;/a&gt;
       &lt;/li&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>I've tried to adjust the border radius on <code>.social-media a:hover</code> but it's still extending past the icon: </p>
  
  <p><a href="https://i.stack.imgur.com/cdAS2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cdAS2.png" alt="enter image description here"></a></p>
  
  <p>I've also tried to adjust the padding of <code>.social-media a:hover</code>, but no effect. This website is live here: <a href="http://nowordpress.gatewaywebdesign.com/" rel="nofollow noreferrer">http://nowordpress.gatewaywebdesign.com/</a>. I tried to create a <a href="https://jsfiddle.net/r7yjsLja/" rel="nofollow noreferrer">JSFiddle</a> but it looks like it won't load the external resource (font-awesome.min.css). Any suggestions? Thanks.</p>
  
  <p><strong>EDIT</strong>: Link to working <a href="http://jsfiddle.net/JfGVE/2034/" rel="nofollow noreferrer">JS Fiddle</a> with loaded font-awesome stylesheet.</p>