字体真棒，背景色不会泄漏

TJBlackman 发表于 Dev

TJ布莱克曼

尝试使用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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

**编辑：使用FA的可堆叠类在图标下方堆叠一个纯白色的FA方块，使其正常工作。

固定小提琴！

不能发布2个以上的链接...，但是请转到Font Awesome>入门>可堆叠以查看其文档。（URL / Font-Awesome / examples /＃stacked）

感谢大家的帮助！

可可

我在这里找到了这个问题，接受的答案说可以像这样堆叠图标：

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