字体-很棒的图标，改变图标中间的颜色(文本)

Question

这个问题与一个已经被问到的非常相似，只是当您悬停在图标上时，我才试图更改图标的文本颜色。

现在，在图标上盘旋的样子如下：

​

​

虽然颜色是正确的，但您可以看到它正在扩展到图标之外。这是我的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>  

我的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;
}

我试图调整.social-media a:hover上的边框半径，但它仍然延伸到图标的后面：

​

​

我也尝试过调整.social-media a:hover的填充，但没有效果。这个网站在这里直播：http://nowordpress.gatewaywebdesign.com/。我试图创建一个JSFiddle，但看起来它不会加载外部资源(字体-awesome.min.css)。有什么建议吗？谢谢。

编辑：链接到工作JS Fiddle与加载字体-令人敬畏的样式表。

Answer 1

这也可以通过使用Font的堆栈系统来解决，就像在您提到的链接中一样：

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

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

​

这只会改变内部的颜色。

Answer 2

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

至

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

您可以将标记的背景色设置为透明。在此之后，您可以给出标签的颜色作为您的要求。

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

至

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

Answer 3

或者你可以用这个

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

您可以通过修改字体大小来修改图标大小。