how do i get glyphicon in the center of the bootstrap navbar?

i am trying to get the glyphicon-log-in in the center of the bootstrap navbar and not even getting into the navbar mean it is showing above the navbar, when debugging.

<a class="navbar-brand pull-left" href="/"><img src="images/logo.png" alt="Elunika"></a>

<span class="glyphicon glyphicon-log-in" id="logIcon"></span>

<div class="nav-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav pull-right">
                <li class="active">
                    <a href="#">HOME</a>
                </li>
                <li>
                    <a href="#">ABOUT</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> WHO, HOW & WHAT? </a>

                <ul class="dropdown-menu">
                    <li>
                        <a href="#">WHO WE ARE?</a>
                    </li>

                    <li>
                        <a href="#">WHAT IS IT?</a>
                    </li>

                    <li>
                        <a href="#">HOW IT WORKS?</a>
                    </li>

                </ul>
                    </li>
                <li>
                    <a href="#">CONTACT US</a>
                </li>
        </ul>
  </div>

and css for logIcon is as follows

#logIcon{
position: absolute;
margin-left:auto;
margin-right:auto;
}

thank you for any help in advance

Solution

From your linked bootsnipp, you only have to replace the word "brand" with your glyphicon span.

<div class="navbar-brand navbar-brand-centered"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></div>

Here's the code in a working fiddle: http://www.bootply.com/EmzUMHPXqd