In the footer for this page http://128.199.58.229/landingpage/
I have some font awesome icons (social media icons).
I'm trying to give them a white background just behind the icons themselves. The white background currently sticks out. I've read some posts on using a combination of width, height and border radius to achieve this, but currently no success.
.lt-bus-info .fa {
background-color: white;
border-radius: 50%;
}
Here's a jsfiddle: http://jsfiddle.net/magician11/nfz9sucn/1/ I'm looking for just the white behind the symbol: https://dl.dropboxusercontent.com/u/14057353/Screen%20Shot%202014-12-03%20at%204.01.18%20pm.png
Anyone know how to fix this? Thanks.
Use stacked icons instead . Here is a fiddle, you can play with it to make it far more better. Below is full code :
HTML
<ul class="list-inline">
<li><a href="#">
<span class="fa-stack fa-lg icon-facebook">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a></li>
<li><a href="#">
<span class="fa-stack fa-lg icon-twitter">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a></li>
<li><a href="#">
<span class="fa-stack fa-lg icon-gplus">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x"></i>
</span>
</a></li>
</ul>
CSS
.fa-stack-1x {
color:white;
}
.icon-facebook {
color:#3b5998;
}
.icon-twitter {
color:#00aced;
}
.icon-gplus{
color:#dd4b39;
}
body {
background-color: black;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments