Changing the position of icons, so they appear in-line and not below each other
<p>I am having an issue with my navbar, which consists of 4 icons and a search bar. I want the search icon to appear after the search bar, but at the moment it is forced below onto a new line and i'm not sure why.</p>

<p>Website: explorecanterbury.co.uk</p>

<p>HTML/CSS:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.form-control {
  width:230px; 
  margin-top: 7px;
}

.navbar{
  max-width: 415px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .navbar{
    width: 75px;
  }
}

.navbar-collapse{
  padding-right: 0px;
  padding-left: 0px;
}
.nav &gt; li {
  padding: 5px;
  margin-top:8px;
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 150, 0, 0.15);
}

.nav &gt; li:last {
  border-right: none;
}

.navbar-default {
  background-color: #fff;
  border-color: rgba(255, 150, 0, 0.15);
}

.nav-toggle-2 {
  width: 24px;
  height: 24px;
  display: block;
}

.nav-toggle-3 {
  width: 24px;
  height: 24px;
  display: block;
}
.LocIcon {
  background-image:url(/images/select.png);
  width:24px;
  height:24px;
  display: block;
}

.photosIcon {
  background-image:url(/images/photos.png);
  width:24px;
  height:24px;
  display: block;
}

.infoIcon {
  background-image:url(/images/information.png);
  width:24px;
  height:24px;
  display: block;
}
.searchIcon {
  background-image:url(/images/search.png);
  width:24px;
  height:24px;
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default" style="z-index:5;"&gt;
  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;&lt;span class="LocIcon"&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;&lt;a id="mgtoggle" class="small toggle" data-value="option2" tabIndex="-1"&gt;&lt;input type="checkbox"/&gt;&amp;nbsp;Museums and Galleries&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="landmarktoggle" class="small toggle" data-value="option3" tabIndex="-1"&gt;&lt;input type="checkbox"/&gt;&amp;nbsp;Landmarks&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="shoppingtoggle" class="small toggle" data-value="option4" tabIndex="-1"&gt;&lt;input type="checkbox"/&gt;&amp;nbsp;Shopping&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="hotelstoggle" class="small toggle" data-value="option5" tabIndex="-1"&gt;&lt;input type="checkbox"/&gt;&amp;nbsp;Hotels + Bed &amp;amp; Breakfast&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="churchestoggle" class="small toggle" data-value="option6" tabIndex="-1"&gt;&lt;input type="checkbox"/&gt;&amp;nbsp;Churches&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="tourstoggle" class="small toggle" data-value="option7" tabIndex="-1"&gt;&lt;input type="checkbox"/&gt;&amp;nbsp;Tours and Guides&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;li&gt;&lt;span class="photosIcon nav-toggle-2 hidden-xs"&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="infoIcon nav-toggle-3 hidden-xs"&gt;&lt;/span&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;div class="searchBar"&gt;
      &lt;div class="input-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Search" id="srch-term"&gt;

      &lt;/div&gt;
      &lt;span class="searchIcon hidden-xs"&gt;&lt;/span&gt;
    &lt;/div&gt;

  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>