css – 如何给字体真棒图标一个背景颜色?

前端之家收集整理的这篇文章主要介绍了css – 如何给字体真棒图标一个背景颜色?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在此页面的页脚http://128.199.58.229/landingpage/

我有一些字体真棒图标(社交媒体图标).

我试图给他们一个白色的背景,只是在图标本身后面.白色背景现在伸出来.我已经阅读了一些使用宽度,高度和边框半径的组合来实现这一点,但目前没有成功.

@H_403_6@.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

@H_403_6@<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

@H_403_6@.fa-stack-1x { color:white; } .icon-facebook { color:#3b5998; } .icon-twitter { color:#00aced; } .icon-gplus{ color:#dd4b39; } body { background-color: black; }

猜你在找的CSS相关文章