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.
You can simply set a single "color" property to set the color of the character/icon to be what you want. If the background circle offsets the icon, you can use line-height to fix it.
To change the color of an icon, select the icon you'd like to edit. The Format tab will appear. Then click Graphics Fill and select a color from the drop-down menu. To add an outline to your icon, click Shape Outline and select a color from the drop-down menu.
To change the color of the icons, simply add or change the “color” property in the CSS. So to change the color of the icons to red in the above example, add “color:red” to the . searchlinks a::after pseudo element.
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;
}
I'm surprised no one has mentioned this approach yet:
html
<div class="social-media text-right">
<a href="" class="facebook">
<span class="fa fa-facebook"></span>
</a>
</div>
css
.social-media a
{
display: inline-block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
margin-right: 10px;
border-radius: 34px;
}
.social-media a.facebook
{
background: #3b5998;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With