The Navbar Icons are slightly off center - html

Question

I'm making a website for my game coming up soon and it'll serve as a commercial piece (one-page website) for the game itself.
I am in the starting phase and is working on the navbar at the top (Yes I am using Bootstrap) but the font-awesome glyphs that I use don't seem to center up right compared to the text in the body:
As you see on the picture the Android and Apple icons are off-center compared to the text underneath. I get that it might be because of the icons I have on the right and left throwing it off center but I am fairly new to web development so I just request some help to fix that up :)
<div class="header">
<div class="well" style="height: 100%">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target=".navHeaderCollapse"
aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="index.html">
<span><img alt="Dynamic Realities" width="42" height="42" src="img/Cogfire-notext.png"></span>
</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a target="_blank" href="#">
<span class="fa fa-android" style="color: #5cb85c; font-size: 42px;"></span>
</a>
</li>
<li>
<a target="_blank" href="#">
<span class="fa fa-apple" style="color: #c0c0c0; font-size: 42px;"></span>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a target="_blank" href="http://www.twitter.com/DynRealities">
<span class="fa fa-twitter-square" style="color: #31b0d5; font-size: 42px;"></span>
</a>
</li>
<li>
<a target="_blank" href="http://www.facebook.com/DynamicRealities">
<span class="fa fa-facebook-square" style="color: #204d74; font-size: 42px;"></span>
</a>
</li>
<li>
<a target="_blank" href="http://www.youtube.com/DynamicRealities">
<span class="fa fa-youtube-square" style="color: #c12e2a; font-size: 42px;"></span>
</a>
</li>
<li>
<a target="_blank" href="#">
<span class="fa fa-tumblr-square" style="color: #204d74; font-size: 42px;"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
With the following CSS applied:
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}

Answer 1

Have a look at my fiddle, only added padding to make the logo center
http://fiddle.jshell.net/Jinukurian7/oqyvprxz/