如何给一个字体真棒图标背景颜色？ [英] How do I give a font awesome icon a background color?

问题描述

在此页的页脚 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%;
}

这里有一个jsfiddle： http://jsfiddle.net/magician11/nfz9sucn/1/
我正在寻找的符号后面的白色： https：//dl.dropboxusercontent .com / u / 14057353 /屏幕％20Shot％202014-12-03％20at％204.01.18％20 pm.png

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.

推荐答案

使用堆叠图标。这是一个小提琴，你可以玩它，使它更好更好。以下是完整代码：

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

这篇关于如何给一个字体真棒图标背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！