We have two problems: one, it's too small, and two, it's really close to the word. What we should do is add margin-right to every icon and make it larger. This means every span tag in the HTML is going to need a class. Let's add class="icon" as follows:
<footer> <div class="wrapper grouping"> <ul> <li class="list-heading">Social</li> <li><a href=""><span class="icon fi-social-facebook"></span>Facebook</a></li> <li><a href=""><span class="icon"></span>Twitter</a></li> <li><a href=""><span class="icon"></span>Google+</a></li> <li><a href=""><span class="icon"></span>Dribble</a></li> </ul> <ul> <li class="list-heading">Interwebs</li> <li><a href=""><span class="icon"></span>Github</a></li> <li><a href=""><span class="icon" ...
