Question

此问题与one that's already been asked非常相似，只是当我将鼠标悬停在图标上时，我试图更改图标的文字颜色。

现在，将鼠标悬停在图标上会是这样的：

虽然颜色正确，但您可以看到它在图标外部延伸。这是我的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，但看起来它不会加载外部资源（font-awesome.min.css）。有什么建议？感谢。

编辑：使用已加载的font-awesome样式表链接到工作JS Fiddle。

Answer 1

使用Font Awesome的堆栈系统也可以解决这个问题，就像你提到的链接一样：

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

你可以给＆lt; a＆gt;标签的背景颜色为透明。之后，你可以给＆lt;我＆gt;标签颜色作为你的要求。

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

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

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

3 个答案: