Как получить глификон в центре бутстрапа navbar?

Question

Я пытаюсь получить глификон-вход в центр загрузочного навигатора и даже не попав в навигационную панель, означает, что он отображается над навигационной панелью при отладке.

<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> 

и CSS для Logicon следующим

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

спасибо за любую помощь заранее

Answer 1

С вашего связанного bootsnipp, вам нужно только заменить слово «бренд» с glyphicon пяди.

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

Вот код в рабочей скрипке: http://www.bootply.com/EmzUMHPXqd

Answer 2

http://www.bootply.com/eHiWDODA83

Вы можете создать новый класс для значка, как это ..

.navbar-center 
{ 
    position: absolute; 
    width: 100%; 
    top: 0; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
} 

И затем использовать разметку, как это ..

<nav class="navbar" role="navigation"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button>  
    </div> 
    <a class="navbar-center navbar-text" href="#"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></a> 
    <div class="navbar-collapse collapse"> 
    <a class="navbar-brand" href="/"><img src="images/logo.png" alt="Elunika"></a> 

    <ul class="nav navbar-nav navbar-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 &amp; 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> 
</nav> 

http://www.bootply.com/eHiWDODA83