Satyadev Satyadev - 5 months ago 20
CSS Question

How to align social icons in footer

I have two

<ul>
tags with links to pages and links to social icons. How ever they are not aligned when I created second
<ul>
tag to have social icons like this:

Here's my site: https://bgrnature.herokuapp.com/#/contact-us

<footer>
<div id="footer">
<div class="container">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about-us">About Us</a></li>
<li><a ui-sref="faqs">FAQS</a></li>
<li><a ui-sref="contact-us">Contact us</a></li>
</ul>

<ul class="nav navbar-nav navbar-right footer-icons">
<li><a href="" class="inactiveLink">Copyright © 2016 </a></li>
<li><i class="fa fa-facebook fa-inverse" aria-hidden="true"></i><a href=""></a></li>
<li><i class="fa fa-youtube fa-inverse" aria-hidden="true"></i><a href=""></a></li>
<li><i class="fa fa-linkedin fa-inverse" aria-hidden="true"></i><a href=""></a></li>
</ul>
</div>
</div>
</footer>


Applying padding-bottom or margin-top is not effective at all. How do I fix this?

Answer

Create class for the li's of the social icons and give margin-top:15px

.social{
  margin-top:15px;
}

Codepen-http://codepen.io/nagasai/pen/NrpGzL

Comments