在此页面的页脚中 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
有人知道怎么解决吗? 谢谢。
最佳答案
使用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;
}
关于css - 如何为 Font Awesome 图标提供背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27264819/