need css trick to solve this issue - css

Question

Hi guys so I'm working on a website with an orange background. I'm using white social icons from the Font Awesome library.
Here is the result of my work
CSS
#import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font- awesome.min.css');
body {
margin: 10px;
background:#da4a10;
}
#social:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
}
#social {
-webkit-transform:scale(0.8);
/* Browser Variations: */
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.fa-3x{
color: white;
}
.social-fb:hover {
color: #3B5998;
}
.social-tw:hover {
color: #4099FF;
}
.social-gp:hover {
color: #d34836;
}
.social-em:hover {
color: #f39c12;
}
HTML
<div id="row">
<div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
<a href="#">
<i id="social" class="fa fa-facebook-square fa-3x social-fb"></i>
</a>
</div>
<div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
<a href="#">
<i id="social" class="fa fa-twitter-square fa-3x social-tw"></i>
</a>
</div>
<div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
<a href="#">
<i id="social" class="fa fa-google-plus-square fa-3x social-gp"></i>
</a>
</div>
<div class="col-xs-2 col-sm-8 col-lg-2 col-md-6 ">
<a href="#">
<i id="social" class="fa fa-envelope-square fa-3x social-em"></i>
</a>
</div>
</div>
http://jsfiddle.net/DTcHh/5582/
I need a solution because when I hover over the social icons, the look of it is not so nice. I tried adding a white background to the icons but it's still not functioning properly.

Answer 1

Since you are using Font Awesome, there is an icon available called: fa-square. This has the exact shape of the square social media icons. Also, Font Awesome has the opportunity to stack icons. If you stack a fa-square under a fa-twitter-square e.g. and make fa-square white, it will solve your problem.
HTML
<div id="row">
<div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
<a href="#">
<span class="fa-stack fa-2x social social-fb">
<i class="fa fa-square fa-stack-1x white-bg"></i>
<i class="fa fa-facebook-square fa-stack-2x "></i>
</span>
</a>
</div>
<div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
<a href="#">
<span class="fa-stack fa-2x social social-tw">
<i class="fa fa-square fa-stack-1x white-bg"></i>
<i class="fa fa-twitter-square fa-stack-2x "></i>
</span>
</a>
</div>
<div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
<a href="#">
<span class="fa-stack fa-2x social social-gp">
<i class="fa fa-square fa-stack-1x white-bg"></i>
<i class="fa fa-google-plus-square fa-stack-2x "></i>
</span>
</a>
</div>
<div class="col-xs-2 col-sm-8 col-lg-2 col-md-6 ">
<a href="#">
<span class="fa-stack fa-2x social social-em">
<i class="fa fa-square fa-stack-1x white-bg"></i>
<i class="fa fa-envelope-square fa-stack-2x "></i>
</span>
</a>
</div>
</div>
CSS
/* Optional theme */
#import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
background: #DA4A10;
margin: 10px;
}
.social {
color: #F9F9F9;
transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
}
/* Definition of the white background */
.white-bg {
color: white;
font-size: 54px;
opacity: 0;
transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
}
.social-fb:hover{
color: #3B5998;
}
.social-tw:hover {
color: #4099FF;
}
.social-gp:hover {
color: #d34836;
}
.social-em:hover {
color: #f39c12;
}
/* Show the white background on hover */
.social-fb:hover .white-bg, .social-tw:hover .white-bg,
.social-gp:hover .white-bg, .social-em:hover .white-bg {
opacity: 1;
}
Solution in action: http://jsfiddle.net/DTcHh/6084/