css - 如何在 fa-3x (Font-awesome) 图标后面设置白色背景

Question

我发现很难自定义我创建的超赞字体图标背后的背景。我正在尝试制作一个白色背景来扩展实际图标。

现在它看起来像下面的图像:

在这里您可以看到白色背景在图标周围占据了太多空间。

代码

 <div class="footer-icons">
                    <a href="#"><i class="fa fa-pencil-square fa-3x pen-btn"></i></a>
                </div>

CSS

 .footer-icons a {
    padding-right: 10px; 
    color: green; 
 }

 .footer-icons i {
    background-color: white;   
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
 }

已尝试使用负值的 padding-left 和 right 来使其变小(留在绿色图标内)

如果我删除填充，它看起来像这样:

希望有人能看到我做错了什么。

Answer 1

因为是字体，所以用line-height来调整。我建议使用图像(例如 png、svg、gif)。这是一个供您查看的 fiddle 示例。 http://jsfiddle.net/4ht7fq91/