更改图标的背景位置

Question

我想在图标和背景之间添加5px间距（顶部，左侧）。所以更具体一点，我需要背景颜色低于图标。我不确定我该怎么办。

HTML：

<span class="icon-background">
    <i class="fa fa-pencil"></i>
</span>

CSS：

.icon-background {
    display: block;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, .5);
    background-position: 60px 60px;
}

.icon-background .fa {
    font-size: 24px;
}

Answer 1

您可以使用margin：

.fa-pencil {
    margin-left: 5px;
    margin-top: 5px;
}

Answer 2

如果您只需要5px，请使用'border'。

border-top:5px white solid;
border-left:5px white solid;