Vadim Badea February 2016

Change Background position for icon

I want to add a 5px spacing (top, left), between the icon and background. So to be more specific, I need the background-color to be lower then the icon. I'm not sure how I can do that.

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;
}

Answers


eburger February 2016

You can use margin:

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


FarZan Takhsha February 2016

If you only need 5px, use 'border'.

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

Post Status

Asked in February 2016
Viewed 3,573 times
Voted 11
Answered 2 times

Search




Leave an answer