Adding a phone and map icon to the left of the bootstrap hamburger icon

Question

I have a basic bootstrap v3 website. When the navbar switches to the hamburger icon on smaller screens, I would like to add a Phone Icon (linking to a phone number) and a Map Icon (linking to google maps) so mobile users can easily access them. I tried adding a phone icon to the left of the hamburger, by adding the code just before the .navbar-toggle button, but I can't figure out how to make it responsive like to hamburger icon. I can position it, but that doesn't keep it responsive.

Here is my current code. I tried to get it working with just the phone icon, but I would also like a map icon to be positioned next to it as well. Most of the styling was copied from the .nav-bar-toggle class styling in the bootstrap.min.css file.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar i {
  font-size: 200%;
  position: relative;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#"><img src="img/autohaus-logo.png" class="navbar-brand"></a>
      <a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a>
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">                    
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div> 
  </div>
</nav>

Answer 1

How to add uncollapsible icons to the Bootstrap Navbar

Let's use the Default navbar from the Bootstrap documentation.

1. Add the <ul class="nav navbar-nav"><li></li></ul> structure at the end of the <div class="navbar-header"> block. This structure will not be collapsed on a narrow screen.
2. Add the visible-xs class to the <ul> tag. Then it will be visible only on a narrow screen.
3. Add icons as items of this structure.
4. Add the pull-right class to each <li> tag. These items will be placed near the toggle-button.

Please check the result. Is it what you want to achieve?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
      <ul class="nav navbar-nav visible-xs">
        <li class="pull-right"><a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a></li>
        <li class="pull-right"><a href="#"><i class="glyphicon glyphicon-map-marker"></i></a></li>
      </ul>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
        <li><a href="#">Left</a></li>
        <li><a href="#">Left</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
        <li><a href="#">Right</a></li>
        <li><a href="#">Right</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>