如何给字体真棒图标背景颜色？

在页面这个页面的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%20pm.png

任何人都知道如何解决这一问题？谢谢。

来源

2014-12-03 magician11

改为使用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; 
}

来源

2014-12-03 08:40:12 Lekhnath

完美！谢谢。 – magician11 2014-12-03 08:58:56

我试过这个，但并不工作：'list.list-social> li.fa.fa-facebook.box-icon background：rgba（0,59,89,152）; }'我们可以像上面提到的[这里]（http：// stackoverflow。com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap）？ – stom 2015-04-26 12:53:18

终于，[这]（http://ksloan.net/css-color-definitions-for-font-awesome-social-icons/）为我工作，谢谢你的小提琴的颜色，为wordpress新闻我用'。 fa-wordpress { color：＃464646; }' – stom 2015-04-26 13:21:29

我正在寻找解决方案，但没有找到完美的用更少的代码，所以我花一点时间，使这个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; 
}

您可能需要一些边界半径，行高和利润发挥但这是不错的选择，更快的解决方案，我相信。

让我知道是否有任何错误！

来源

2015-06-25 09:11:38 Kartic

我很惊讶没有人提到这种做法尚未：

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

来源

2015-12-05 11:42:38 Jahmic

好点。当我增加字体大小时，背景不会覆盖整个图标。 http://codepen.io/magician11/pen/Vewgqp – magician11 2015-12-06 11:37:28

有点不同的问题，但我添加了额外的CSS作为大小的例子。尝试使用宽度，线条高度和边框半径进行游戏 – Jahmic 2015-12-07 14:42:37

这是一个非常酷的方式做到这一点还没有被提及在这里和几行代码中你是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"; 
}

这种方式，您也可以填写与MEH内容或皱眉，可以发现here码，享受！

来源

2017-03-03 01:48:30

最简单的将可能给列表项的背景颜色，像这样

li { 
background-color: white; 
}

来源

2018-01-04 09:12:29

如何给字体真棒图标背景颜色？

回答

相关问题