title: replace link text with graphic through css
body: <p>I want to replace the links in my bootstrap navigation with icons. But only when A class is added to the navigation. I currently have a fixed navigation which 'shrinks' when the user scrolls using</p>
  
  <p>html (head)</p>
  
  <pre><code> $(function(){
     var shrinkHeader = 100;
     $(window).scroll(function() {
  var scroll = getCurrentScroll();
    if ( scroll &gt;= shrinkHeader ) {
         $('header').addClass('shrink');
      }
      else {
          $('header').removeClass('shrink');
      }
   });
  </code></pre>
  
  <p>with the 'shrink' class added to header div when scrolled 100px.</p>
  
  <p>css</p>
  
  <pre><code>.navbar-custom .nav&gt;li&gt;a {
     font-size: 1.15em;
     font-weight: 400;
     etc...
  
  header.shrink { 
    min-height: 50px;
  }
  
  header.shrink .nav&gt;li&gt;a { line-height: 50px; }
  </code></pre>
  
  <p>when the 'shrink' class gets added to the .header I want the links (which are currently text) to turn into icons. not sure the approach for this</p>
  
  <p>I have fontawesome installed and usable</p>