字体很棒，背景颜色不会泄漏

Question

尝试使用 FA 图标，但我认为它们在我使用的几乎是黑色的背景下看起来不太好。试图在它们上面放一个白色背景，但它泄漏了......

我很乐意使用 FA 图标，这样如果将来有人需要调整我正在使用的网站，他们会很容易做到。

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

**编辑：使用 FA 的可堆叠 class 在图标下方堆叠纯白色 FA 方块使其工作。

Fixed Fiddle!

不能 post 超过 2 个链接...但是转到 Font Awesome > 入门 > Stackable 查看他们的文档。 (URL/Font-Awesome/examples/#stacked)

感谢大家的帮助！

Answer 1

编辑：我的错误，误解了问题。为什么不直接为图标添加与背景颜色相匹配的边框呢？下面是一个例子。白色下划线来自环绕锚标签。

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

Answer 2

我找到了 this question here and the accepted answer said to stack 这样的图标：

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

Answer 3

我会建议使用此解决方案，但它仍然有点麻烦。我已将您的 ID 替换为类，因为通常更好的做法是在 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;
}

字体很棒，背景颜色不会泄漏

Font Awesome with background color that doesn't leak out

html

css

fonts

icons

background