CSS - Center Font-awesome icons - html

Question

How can I center the FontAwesome icons inside the squares?
At this point all of the icons, except from facebook icon are beeing placed more or less to the right, especially the soundcloude icon.
I have been using the "w3schools - Social Media Buttons" example, it seems like this issue occure when the squares are scaled down.
.fa {
padding: 15px;
text-align: center;
vertical-align:middle;
text-decoration: none;
margin: 15px 3px;
border-radius: 50%;
width: 7.5px;
height: 7.5px;
font-size: 15px;
line-height: 7.5px !important;
}
.fa {
background: #F0F0F0;
color: #282828;
}
.fa-facebook:hover {
background: #3B5998;
color: white;
line-height: inherit;
}
.fa-youtube:hover {
background: #bb0000;
color: white;
line-height: inherit;
}
.fa-instagram:hover {
background: #125688;
color: white;
line-height: inherit;
}
.fa-soundcloud:hover {
background: #ff5500;
color: white;
line-height: inherit;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Answer 1

Kill the unnecessary padding (which leaves no room for the icons) and let the width/height/line-height of the elements determine their layout.
Before:
padding: 15px;
width: 7.5px;
height: 7.5px;
line-height: 7.5px !important;
After:
width: 30px;
height: 30px;
line-height: 30px !important;
You can also remove some redundant styles from your :hover states.
Live example:
.fa {
text-align: center;
vertical-align: middle;
text-decoration: none;
margin: 15px 3px;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 15px;
line-height: 30px !important;
}
.fa {
background: #F0F0F0;
color: #282828;
}
.fa:hover {
color: #fff;
}
.fa-facebook:hover {
background: #3B5998;
}
.fa-youtube:hover {
background: #bb0000;
}
.fa-instagram:hover {
background: #125688;
}
.fa-soundcloud:hover {
background: #ff5500;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Answer 2

Yes, you can centered the icons.
I have added my code snippet.
Suggesting, please do not write css for class fa the. please add new class for the same
.decoration-fa{
padding:15px;
text-align:center;
text-decoration: none;
border-radius: 50%;
background: #F0F0F0;
color: #282828;
width:18px;
height:18px;
}
.decoration-fa.fa-facebook:hover {
background: #3B5998;
color: white;
}
.decoration-fa.fa-youtube:hover {
background: #bb0000;
color: white;
}
.decoration-fa.fa-instagram:hover {
background: #125688;
color: white;
}
.fa-soundcloud:hover {
background: #ff5500;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>