如何为 Font Awesome 图标赋予背景颜色？

Posted 2023-02-21

【中文标题】如何为 Font Awesome 图标赋予背景颜色？

【英文标题】：How do I give a Font Awesome icon a background color?

【发布时间】：2015-01-31 14:36:25

【问题描述】：

在此页面的页脚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

有人知道如何解决这个问题吗？ 谢谢。

【问题讨论】：

查看这个答案***.com/a/63357356/9031516

【参考方案1】：

     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;

See examples

【参考方案2】：

最简单的方法可能是为列表项设置背景色

li 
background-color: white;

【参考方案3】：

这是一个非常酷的方法，这里没有提到，在几行代码中你就是 gtg。

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

这样你也可以用here可以找到的meh或皱眉代码填充内容，享受！

【参考方案4】：

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

html

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

【讨论】：

好点。但是，当我增加字体大小时，背景不会覆盖整个图标。 codepen.io/magician11/pen/Vewgqp

有点不同的问题，但我添加了额外的 css 作为大小的示例。尝试使用宽度、行高和边框半径

【参考方案5】：

我正在寻找解决方案，但没有找到代码更少的完美解决方案，所以我花了很少的时间为您制作了这个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;

您可能需要使用一些边框半径、行高和边距，但我相信这是非常合适和更快的解决方案。

如果有错误请告诉我！

【参考方案6】：

请改用stacked icons。这是一个fiddle，您可以使用它来让它变得更好。以下是完整代码：

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;

【讨论】：

我试过了，但没有用：list.list-social> li.fa.fa-facebook.box-icon background: rgba(0, 59, 89, 152); 我们可以像提到的那样覆盖here 吗？

最后，this 为我工作，感谢您为小提琴提供的颜色，我使用了 .fa-wordpress color: #464646; 的 wordpress press