title: How do I hide text but keep icons on a small screen?
body: <p>I want to hide the words, Home/Reservations/myReservations/About/Settings when the screen gets smaller BUT I want the icons to still be visible on a smaller screen. I am currently using:</p>
  
  <p><a href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="nofollow">http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css</a></p>
  
  <p><a href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="nofollow">http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css</a></p>
  
  <p><a href="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js" rel="nofollow">http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js</a></p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
     &lt;div class="container-fluid"&gt;
        &lt;div id='test' ng-click="doTheBack()"&gt;&lt;a class="navbar-brand"&gt;&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;Back&lt;/a&gt;&lt;/div&gt;
           &lt;div class="nav navbar-nav navbar-left"&gt;
  
  
          &lt;/div&gt;
        &lt;div&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;a class="navbar-brand visible-lg" href="/landingIndex.html"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;Home&lt;/a&gt;
      &lt;a class="navbar-brand" href="#"&gt;&lt;i class="fa fa-calendar-o"&gt;&lt;/i&gt; Reservation&lt;/a&gt;
      &lt;a class="navbar-brand" href="#myReservation"&gt;&lt;i class="fa fa-list"&gt;&lt;/i&gt; MyReservations&lt;/a&gt;
      &lt;a class="navbar-brand" href="#about"&gt;&lt;i class="fa fa-shield"&gt;&lt;/i&gt; About&lt;/a&gt;
      &lt;a class="navbar-brand" href="#settings"&gt;&lt;i class="fa fa-gear"&gt;&lt;/i&gt; Settings&lt;/a&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>