如何给Font Awesome图标添加背景颜色？

Question

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

我有一些 Font Awesome 图标 (社交媒体图标)。

我试图在这些图标后面给它们一个白色背景。当前的白色背景很突兀。我已经阅读了一些文章，尝试使用宽度、高度和边框半径的组合来实现这个效果，但是目前没有成功。

.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%20pm.png

有人知道如何解决吗？ 谢谢。

- magician11

---

请查看此答案：https://dev59.com/Sa3la4cB1Zd3GeqPQax4#63357356 - James Ikubi

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

- Lekhnath

---

我尝试了这个，但不起作用：`list.list-social> li.fa.fa-facebook.box-icon{ background: rgba(0, 59, 89, 152); }`我们能否按照[这里](https://dev59.com/p2sz5IYBdhLWcg3wJUjJ)所述进行覆盖？ - Shaiju T

最终，这个 对我有用，感谢你在 fiddle 中提供的颜色，对于 WordPress Press，我使用了 `.fa-wordpress{ color: #464646;}`。 - Shaiju T

Answer 2

我很惊讶还没有人提到这种方法:

          <div class="social-media text-right">
            <a href="" class="facebook">
              <span class="fa fa-facebook"></span>
            </a>
          </div>

css

.social-media a
{
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin-right: 10px;
    border-radius: 34px;
}
    .social-media a.facebook
    {
        background: #3b5998;
    }

- Jahmic

---

好的观点。但是，当我增加字体大小时，背景并没有覆盖整个图标。http://codepen.io/magician11/pen/Vewgqp - magician11

一个有点不同的问题，但是我添加了额外的CSS作为尺寸的示例。试着玩一下宽度、行高和边框半径。 - James John McGuire 'Jahmic'

Answer 3

我正在寻找解决方案，但没有找到简洁的代码，所以我花了一点时间为您制作了这个fiddle。

HTML

<div class="background">
<i class="fa fa-facebook-square fb-btn"></i>
<i class="fa fa-twitter-square twt-btn"></i>
<i class="fa fa-google-plus-square gp-btn"></i>
</div>

CSS

.fb-btn{
    background-color: #fff;
    border-radius: 50% 8px 10px 50%;
    color: #305891;
    font-size: 40px;
    height: 32px;
    line-height: 30px;width: 32px;
    margin: 5px;
}

.twt-btn{
    background-color: #fff;
    border-radius: 50%;
    color: #2ca8d2;
    font-size: 40px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    width: 30px;
}

.gp-btn{
    background-color: #fff;
    border-radius: 50%;
    color: #dd4b39;
    font-size: 40px;
    height: 30px;
    line-height: 30px;
    width: 30px;
    margin: 5px;
}

.background{
    background-color:#cccccc;
    width:150px;
    height:60px;
    padding:60px 50px;
}

你可能需要调整一些边框半径、行高和边距，但我相信这是一个很好的适配和更快的解决方案。

如果有任何错误，请告诉我！

- Kartic

Answer 4

最简单的方法可能是给列表项设置背景颜色，就像这样

li {
background-color: white;
}

- Sandip Shrestha

Answer 5

     background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );
    background-size: 84%;
    background-position: 60% 0;
    background-repeat: no-repeat;

查看示例

- James Ikubi

Answer 6

这里有一种非常酷的方法，还没有在这里提到，在几行代码中你就可以搞定。

i.fa-smile-o {
position: relative;
color: #555;
}

i.fa-smile-o:before {
    content: "\f111";
    color: #f1c40f;
}

i.fa-smile-o:after {
    left: 0;
    top: 0;
    position: absolute;
    content: "\f118";
}

这样，您还可以使用可以在此处找到的“嗯”或“皱眉”代码填充内容，尽情享受吧！

- Juan Pablo Ugas