Hey everyone, I'm currently designing a website with a vibrant orange background and incorporating white social icons from the Font Awesome library.
Check out the progress of my project below:
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);
-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'm seeking guidance because when hovering over the social icons, the appearance is not as appealing as I would like. I attempted to add a white background to the icons, but it hasn't resolved the issue.