How can I pull my social media icons to the right in my navbar?

I am using bootstrap and below is my code for my navbar. I've added font awesome icons, but I want that to be pulled to the right. I can't seem to pull it to the right without throwing the Home, About, and Contact out of whack. Any idea?

 <nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
     <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav navbar-left">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#contact">Contact</a></li>
         <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i>
         <li><a href="#"><i class="fa fa-twitter fa-lg"></i>
         <li><a href="#"><i class="fa fa-pinterest fa-lg"></i>
           </ul>
         </li>
       </ul>
     </div><!--/.nav-collapse -->
   </div>
 </nav>