html - Bootstrap 3 navbar fixed top menu items as images -

i'm creating template using bootstrap v3.3.6. here's part of template:

as can see have navbar fixed @ top , have menu items icons or images embedded between <li></li> tags, user info icon , gear icon.

what don't know sure if i'm doing correctly, mean there special class in bootstrap menu items want insert image. maybe images not supposed there.

another question if should place logo image inside <a class="navbar-brand"></a>? if try insert bigger logo image in height navbar height logo image isn't centered. easiest way change navbar height , how center images vertically in navbar?

(maybe that's code, wanna make sure question isn't lacking anything) part 2 images inserted navigation items relevant

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">   <div class="container">     <!-- brand , toggle grouped better mobile display -->     <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">         <span class="sr-only">toggle navigation</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="#">workout.lt</a>     </div>     <!-- collect nav links, forms, , other content toggling -->     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav navbar-right">         <li>           <a href="#">vardenis pavardenis</a>         </li>         <li>           <a href="#"><img src="images/user-info.png"></a>         </li>         <li>           <a href="#"><img src="images/user-gear.png"></a>         </li>         <li>           <a href="#">services</a>         </li>         <li>           <a href="#">atsijungti</a>         </li>       </ul>     </div>     <!-- /.navbar-collapse -->   </div>   <!-- /.container --> </nav> 

to answer second question, put image in navbar-brand anchor , use inspector adjust how navbar looks. copy css separate document overrides default bootstrap css.

<div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">         <span class="sr-only">toggle navigation</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="#"><img src="../path/picture.jpg" alt="picture" height="90" width="180" /></a>     </div> 

your css this:

.nav-bar-brand {      height:90px;      width:100%;  /*or whatever width wanted*/  }  

again, using inspector quicker experimenting , uploading css document.