20

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.

1

6 Answers 6

32

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;
}
2
  • i tried this but doesnt work: list.list-social> li.fa.fa-facebook.box-icon{ background: rgba(0, 59, 89, 152); } can we overide as mentioned here ?
    – Shaiju T
    Apr 26, 2015 at 12:53
  • finally, this worked for me, thank you for color in fiddle, for wordpress press i used .fa-wordpress{ color: #464646; }
    – Shaiju T
    Apr 26, 2015 at 13:21
4

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;
    }
2
  • good point. When I increase the font size though, the background doesn't cover the whole icon. codepen.io/magician11/pen/Vewgqp
    – magician11
    Dec 6, 2015 at 11:37
  • 1
    A bit of a different question, but I have added additional css as an example for sizes. Try playing around with width, line-height and border-radius Dec 7, 2015 at 14:42
1

I Was searching for the solution but didn't found perfect one with less code so I spend little time and made this fiddle for you.

HTML

<div class="background">
<i class="fa fa-facebook-square fb-btn"></i>
<i class="fa fa-twitter-square twt-btn"></i>
<i class="fa fa-google-plus-square gp-btn"></i>
</div>

CSS

.fb-btn{
    background-color: #fff;
    border-radius: 50% 8px 10px 50%;
    color: #305891;
    font-size: 40px;
    height: 32px;
    line-height: 30px;width: 32px;
    margin: 5px;
}

.twt-btn{
    background-color: #fff;
    border-radius: 50%;
    color: #2ca8d2;
    font-size: 40px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    width: 30px;
}

.gp-btn{
    background-color: #fff;
    border-radius: 50%;
    color: #dd4b39;
    font-size: 40px;
    height: 30px;
    line-height: 30px;
    width: 30px;
    margin: 5px;
}

.background{
    background-color:#cccccc;
    width:150px;
    height:60px;
    padding:60px 50px;
}

You may need to play with some border radius, line-height and margins but that's good fit and faster solution I believe.

Let me know if there's any mistake!

0
0

Here is a really cool way to do it that has not been mentioned here and in a couple lines of code you're gtg.

i.fa-smile-o {
position: relative;
color: #555;
}

i.fa-smile-o:before {
    content: "\f111";
    color: #f1c40f;
}

i.fa-smile-o:after {
    left: 0;
    top: 0;
    position: absolute;
    content: "\f118";
}

This way you can also fill the content with meh or frown codes that can be found here, enjoy!

0

The easiest will probably to give the list item a background color like so

li {
background-color: white;
}
0
     background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );
    background-size: 84%;
    background-position: 60% 0;
    background-repeat: no-repeat;

See examples

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.