Separate JSP CSS icons

Question

I’m wanting to separate my icons, because there are many together but I’m not getting it. By putting the padding the application gets like this.

Increases the with and heigth and not separating the icons.

.redes_sociais{
    padding: 30px;
}

.top{
    padding: 30px;
}

<ul class="top">
    <li><i class="fa fa-phone"></i> Atendimento</li>
    <li><i class="fa fa-envelope"></i> Ajuda</li>    
</ul>
<ul class="redes_sociais">
    <li><i class="fa fa-facebook" action="" ></i></li>
    <li><i class="fa fa-twitter" action=""></i></li>
    <li><i class="fa fa-linkedin" action=""></i></li>
    <li><i class="fa fa-dribbble" action=""></i></li>
    <li><i class="fa fa-google-plus" action=""></i></li>
</ul>

Answer 1

The padding is being applied to the element ul.redes_sociais, and not the items within it (ul.redes_sociais > li).

Add that snippet to your CSS:

.redes_sociais li {
  padding: 30px;
}