Idios Idios - 5 months ago 31
HTML Question

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:

Here's my footer, with the space below the icons

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

Answer

using flexbox you can achieve what you want.

#footer {
  background: #0e0e0e;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 0.9em;
}
#footer ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0
}
#footer li {
  list-style: none;
  display: inline-block;
  margin: 0 5px
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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>