如何在悬停时更改fontawesome图标背景？ jsfiddle

Question

I am trying to create icons using fontawesome by inserting an icon inside an open square. On hover, I would like to change the color of the background inside the square, as well as the actual color of the square and the icon color.

I have put an example here: http://jsfiddle.net/5hzv3/2/

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

The problem is that you're actually hovering over the square's child element, so I'm trying to get this to work.

Answer 1

That's what you need?

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

Just changed your css to this:

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

If the square must change. This is the code:

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

I created an example that might help you. It's a generic css that fits in every case, buuut, might give you ideas.

Hope it helps ... http://jsfiddle.net/5hzv3/15/

Answer 2

Building off Felipe Miosso's example, I figured out how to do this minimally and still use the official icons:

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