Bootstrap 3 navbar fixed top menu items as images

Question

I'm creating template using Bootstrap v3.3.6. Here's the part of my template:

As you can see I have navbar fixed at the top and I also have menu items that are icons or simply images embedded between <li></li> tags, user info icon and gear icon.

What I don't know for sure is if I'm doing it correctly, I mean is there a special class in bootstrap that is specifically for menu items where you want to insert image. Maybe those images are not supposed to be there.

Another question would be if I should place my logo image inside <a class="navbar-brand"></a> ? If I try to insert bigger logo image in height than navbar height then logo image isn't properly centered. What is the easiest way to properly change navbar height and how to center images vertically in navbar?

(Maybe that's too much code, but I wanna make sure that my question isn't lacking anything) only part where two images are inserted as navigation items are relevant

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for 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 the nav links, forms, and other content for 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>

Answer 1

To answer the second question, I put the image in the navbar-brand anchor and then use the inspector to adjust how the navbar looks. I copy that CSS into a separate document that overrides the 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 would look something like this:

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

Again, using the inspector is always quicker than experimenting and then uploading the CSS document.