I am currently working on creating icons with fontawesome where the icon is placed inside an open square. I want to change the background color of the square, its actual color, and the icon color when hovering over it.
For reference, check out this example: http://jsfiddle.net/5hzv3/2/
.social-icons .fa-square-o:hover {
background-color: #3b5998; /* The overflow is outside the square */
color: #fff
}
The issue here is that the hover effect targets the child element of the square, not the square itself. Working on resolving this.