Font Awesome with background color that doesn't leak out

Question

Trying to use FA icons, but i dont think they look good on the almost black background i am working with. Tried to put a white background on them, but it leaks out...

I would love to use the FA icons so if anyone in the future needs to adjust the site im working on, it will be very easy for them to do so.

See my fiddle here!

== HTML ==

<div id="headerwrapper">
        <div id="SocialMediaWrapper">
        <p>Stay In Touch</p>
        <ul>
            <li><a href="#" id="facebookIconHeader"><i class="fa fa-facebook-square"></i></a><li>
            <li><a href="#" id="TwitterIconHeader"><i class="fa fa-twitter-square"></i></a><li>
            <li><a href="#" id="YoutubeIconHeader"><i class="fa fa-youtube-square"></i></a><li>
            <li><a href="#" id="InstagramIconHeader"><i class="fa fa-instagram"></i></a><li>
            <li><a href="#" id="PinterestIconHeader"><i class="fa fa-pinterest-square"></i></a><li>
        </ul>
    </div>



</div>

== CSS ==

#headerwrapper {background-color: black; position: relative; height: 200px; width: 400px; 
}
#SocialMediaWrapper {position: absolute; top: 2px; left: 20px;}
#SocialMediaWrapper p {color: white; text-align: center; margin: 0; }
#SocialMediaWrapper ul li {display: inline-block;}
#SocialMediaWrapper ul li a {font-size: 35px; margin: 0 5px; background-color: white;}
#SocialMediaWrapper ul li a:hover {text-shadow: none;}
#SocialMediaWrapper ul li #facebookIconHeader {color: #3A5795;}
#SocialMediaWrapper ul li #TwitterIconHeader {color: #55ACEE;}
#SocialMediaWrapper ul li #YoutubeIconHeader {color: #CC181E;}
#SocialMediaWrapper ul li #InstagramIconHeader {color: #49769C;}
#SocialMediaWrapper ul li #PinterestIconHeader {color: #C91D1E;}

== LINK ==

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

**EDIT: Got it working using FA's stackable class to stack a plain white FA square below the icon.

Fixed Fiddle!

Can't post more than 2 links... but go to Font Awesome > Get started > Stackable to view their documentation. (URL/Font-Awesome/examples/#stacked)

Thanks for everyone's help!

Pytth · Answer 1 · 2015-11-18T22:17:27.793

0

EDIT: My mistake, misunderstood the question. Why not just add a border to the icons that matches the color of the background? Below is an example. The white underline comes from the wrapping anchor tag.

https://jsfiddle.net/9kquxou8/3/

#SocialMediaWrapper ul li a {font-size: 35px; margin: 0 5px; }

#SocialMediaWrapper ul li i{
    box-sizing: content-box;
    overflow: hidden;
    background-color: white;
}

edited Nov 18 '15 at 22:17

answered Nov 18 '15 at 21:38

Pytth

4,008
24
29

Pretty close, but the background im working on is textured, so I can't exactly match the color. I'll have to keep trying when I get home from work, but I thought I'd post it because I can't be the first person to look for a solution to this problem. – TJBlackman Nov 18 '15 at 21:56
Set the border color to transparent? – Pytth Nov 18 '15 at 21:57
That made it worse! ha ha I'll be sure to keep this post updated as I go. Might end up with me styling each on individually.. idk.. – TJBlackman Nov 18 '15 at 22:03
Lol sorry about that. Last thing, I tried was removing the white background color from the `a` tag and giving the icon's themselves the background color. – Pytth Nov 18 '15 at 22:16

score 0 · Accepted Answer · edited May 23 '17 at 10:29

0

I found this question here and the accepted answer said to stack the icons like this:

<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>

.fa-stack-1x {
  color:white;
}
.icon-facebook {
  color:#3b5998;
}

edited May 23 '17 at 10:29

Community

1
1

answered Nov 18 '15 at 21:56

cocoa

3,806
7
29
56

This worked perfect! I should have explored FA's documentation more carefully, but hey.. learn something new every day! **Note to those doing this... I did have to make the stacked-white-fa-square a few pixels smaller, then position it with a margin-left: 1px and margin-bottom: 1px; https://jsfiddle.net/9kquxou8/5/ – TJBlackman Nov 18 '15 at 23:46

score 0 · Answer 3 · answered Nov 18 '15 at 23:23

I would suggest this solution, but still it's a bit of a hack. I have replaced your id with classes instead as it's generally better practise using classes in css.

<div class="headerwrapper">
<div class="social-media-wrapper">
<p>Stay In Touch</p>
    <ul>
        <li><a href="#"><i class="fa fa-facebook-square icon-background"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter-square icon-background"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube-square icon-background"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram icon-background"></i></a></li>
        <li><a href="#"><i class="fa fa-pinterest-square icon-background"></i></a></li>
    </ul>
</div>

.headerwrapper {
    background-color: black;
    position: relative; 
    height: 200px; 
    width: 400px; 
}
.social-media-wrapper {position: absolute; top: 2px; left: 20px;}
.social-media-wrapper p {color: white; text-align: center; margin: 0; }
.social-media-wrapper ul li {display: inline-block;}
.social-media-wrapper ul li a {font-size: 35px; margin: 0 5px;}

.fa-facebook-square {color: #3A5795;}
.fa-twitter-square {color: #55ACEE;}
.fa-youtube-square {color: #CC181E;}
.fa-instagram {color: #49769C;}
.fa-pinterest-square {color: #C91D1E;}

.icon-background {
    background: white;
    width: 29px;
    height: 29px;
    border-radius: 6px;
    text-align: center;
    line-height: 29px;
    vertical-align: middle;
}

The individual Id's were only there so I could color each one individually. got it working in the fiddle posted above. — TJBlackman, Nov 18 '15 at 23:48

Font Awesome with background color that doesn't leak out

3 Answers3