如何将字体真棒图标设为背景颜色？

Question

在此页面的页脚中 http://128.199.58.229/landingpage/

我有一些字体真棒图标(社交媒体图标).

我试图在图标本身后面给他们一个白色背景.白色背景目前突出.我已经阅读了一些使用宽度,高度和边界半径组合的帖子来实现这一目标,但目前没有成功.

.lt-bus-info .fa {
background-color: white;
border-radius: 50%;
}

这是一个jsfiddle:http://jsfiddle.net/magician11/nfz9sucn/1/ 我正在寻找符号背后的白色:https://dl.dropboxusercontent.com/u/14057353/Screen%20Shot%202014- 12-03%20AT%204.01.18%20 pm.png

有人知道怎么修这个东西吗？谢谢.

Answer 1

请改用堆叠图标.这是一个小提琴,你可以玩它,使它更好.以下是完整代码:

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