title: Show icon and text on active nav tab, icon only on inactive
body: <p>I have bootstrap's tabbed navigation with font-awesome icons and text in each tab.</p>
  
  <p>When a tab is active, I want both the icon and text to display. On the inactive tabs, only the icon should show up:</p>
  
  <p><a href="https://i.stack.imgur.com/bhA9G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bhA9G.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="row" id="tabbedItemsRow"&gt;
      &lt;div class="col-lg columnBlock"&gt;
          &lt;ul class="nav nav-tabs" role="tablist"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" data-toggle="tab" href="#Content1"&gt;
                      &lt;i class="fas fa-bell text-warning"&gt;&lt;/i&gt; &lt;!-- tab icon --&gt;
                      Tab1  &lt;!-- tab text--&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link active" data-toggle="tab" href="#Content2"&gt;
                      &lt;i class="fas fa-info text-primary"&gt;&lt;/i&gt;
                      Tab2
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" data-toggle="tab" href="#Content3"&gt;
                      &lt;i class="fas fa-server text-primary"&gt;&lt;/i&gt;
                      Tab3
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
  
          &lt;div class="tab-content"&gt;
              &lt;div id="Content1" class="tab-pane hide"&gt;
                  Some content
              &lt;/div&gt;
              &lt;div id="Content2" class="tab-pane active"&gt;
                  More content
              &lt;/div&gt;
              &lt;div id="Content3" class="tab-pane hide"&gt;
                  Some  more content                
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>