I can't align an icon and its text within a menu item

as a new person dealing with HTML5 + CSS3 I am struggling with menus and text and icon aligments. This the scenario: Each line of the menu has an icon and a text. The problem is that I can't get them separated enough to put them more readable. They appear too close and I want to have spaces between them. Below is the html and css3 code, thanks in advance

Best!

HTML code

            <div id="sidebar">
                <ul class="menu">
                    <li><a href="#" class="home">Home</a></li>
                    <li><a href="#" class="explore">Explore</a></li>
                    <li><a href="#" class="users">   Users</a></li>
                    <li><a href="#" class="signout">   Sign Out</a></li>
                </ul>
            </div>

CSS3 code

 #sidebar {
    position: absolute;
    right: -240px;
    background: #DF314D;  
    width: 240px;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 4px;

}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;

}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;

    .....some transitions
}


menu a.home {

    display: inline-block;
    background: url(../imagenes/bpi.png) no-repeat left;

    padding-right: 20px; /*no luck with this line */
 }

.menu a.explore { 
    display: inline-block;
     background: url(../imagenes/gasi.png) no-repeat left;
 }

.menu a.users { 
    display: inline-block;
    background: url(../imagenes/bicici.png) no-repeat left; 
}

.menu a.signout { 
    display: inline-block;
    background: url(../imagenes/bai.png) no-repeat left; 
}