CSS 如何为字体真棒图标提供背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27264819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I give a font awesome icon a background color?
提问by magician11
In the footer for this page http://128.199.58.229/landingpage/
在此页面的页脚中 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%;
}
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
这是一个 jsfiddle：http: //jsfiddle.net/magician11/nfz9sucn/1/我正在寻找符号后面的白色：https: //dl.dropboxusercontent.com/u/14057353/Screen%20Shot%202014- 12-03%20at%204.01.18%20pm.png
Anyone know how to fix this? Thanks.
有人知道怎么修这个东西吗？谢谢。
回答by Lekhnath
Use stacked iconsinstead . Here is a fiddle, you can play with it to make it far more better. Below is full code :
改用堆叠图标。这是一个小提琴，你可以用它来让它变得更好。以下是完整代码：
HTML
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
CSS
.fa-stack-1x {
color:white;
}
.icon-facebook {
color:#3b5998;
}
.icon-twitter {
color:#00aced;
}
.icon-gplus{
color:#dd4b39;
}
body {
background-color: black;
}
回答by Jahmic
I'm surprised no one has mentioned this approach yet:
我很惊讶还没有人提到这种方法：
html
html
<div class="social-media text-right">
<a href="" class="facebook">
<span class="fa fa-facebook"></span>
</a>
</div>
css
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;
}
回答by Kartic
I Was searching for the solution but didn't found perfect one with less code so I spend little time and made this fiddlefor you.
我正在寻找解决方案，但没有找到代码更少的完美解决方案，所以我花很少的时间为您制作了这个小提琴。
HTML
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
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;
}
You may need to play with some border radius, line-height and margins but that's good fit and faster solution I believe.
您可能需要使用一些边框半径、行高和边距，但我相信这是非常合适且更快的解决方案。
Let me know if there's any mistake!
让我知道是否有任何错误！
回答by Juan Pablo Ugas
Here is a really cool way to do it that has not been mentioned here and in a couple lines of code you're gtg.
这是一个非常酷的方法，这里没有提到，在几行代码中你就是 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";
}
This way you can also fill the content with meh or frown codes that can be found here, enjoy!
通过这种方式，您还可以使用可在此处找到的 meh 或皱眉代码填充内容，享受吧！
回答by Sandip Shrestha
The easiest will probably to give the list item a background color like so
最简单的方法可能是给列表项一个像这样的背景颜色
li {
background-color: white;
}
