Font-awesome icons not correctly positioned in the footer

I have a footer on my website.

I want to have the icons to be center (both vertically and horizontally), and for the colored area to be:

• Always at the bottom of the screen
• Not much taller than the icons

Code:

#footer {
  background: #0e0e0e;
  border-top: 0px solid #0e0e0e;
  font-size: 0.9em;
  margin-top: 0px;
  padding: 0px;
  clear: both;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0px;
}

<footer id="footer" class="color color-secondary short">
  <div class="container">
    <div class="row">
      <div class="col-md-12 center">
        <ul class="social-icons mb-md">
          <li class="social-icons-fa-github"><a href="https://github.com" target="_blank" title="GitHub"><i class="fa fa-github"></i></a>
          </li>
          <li class="social-icons-linkedin"><a href="www.linkedin.com" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a>
          </li>
          <li class="social-icons-stack-overflow"><a href="http://stackoverflow.com" target="_blank" title="Linkedin"><i class="fa fa-stack-overflow"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

  

What it looks like with this code:

I have changed the padding, margin, and height in px values a few times, and couldn't achieve the desired result.

Edit: Dippas' code works, but I had to modify some more existing CSS code - it came out as:

#footer .container .row > div {
margin-bottom: 10px;
margin-top: -23px; }

Now my footer is at the bottom, with pixel-perfect distances defined!