Question

我试图通过在空心方块内插入一个图标来使用fontawesome创建图标。在悬停时，我想更改正方形内的背景颜色，以及正方形的实际颜色和图标颜色。

.social-icons .fa-square-o:hover {
    background-color: #3b5998; /* This overflows outside the square */
    color: #fff
}

问题是你实际上是在广场上的子元素上空盘旋，所以我试图让它工作。

Answer 1

这就是你需要的东西？

小提琴： http://jsfiddle.net/5hzv3/6/

刚刚将你的css更改为：

.fa-lg:hover { color: #fff }
.fa-lg:hover > i { color: #3b5998; }

如果仅，则必须更改方块。这是代码：

.fa-lg:hover { color: #fff }
.fa-lg:hover > .fa-square-o { color: #3b5998; }

被修改的我创建了一个可能对您有所帮助的示例。它是不适用于所有情况的通用css，buuut，可能会给你一些想法。

希望它有所帮助... http://jsfiddle.net/5hzv3/15/

Answer 2

建立Felipe Miosso的例子，我想出了如何做到这一点，并仍然使用官方图标：

<style>
  .fa-stack       .fa                    { color: #000000; }
  .fa-stack       .fa.fa-square          { color: #FFFFFF; }
  .fa-stack:hover .fa.fa-facebook-square { color: #3B5998; }
</style>
<span class="fa-stack">
  <i class="fa fa-square fa-stack-1x"></i>
  <i class="fa fa-facebook-square fa-stack-1x"></i>
</span>

http://jsfiddle.net/5hzv3/27/

如何在悬停时更改字体真棒图标背景？的jsfiddle

2 个答案: