title: Changing the glyphicons on active tabs
body: <p>So I'm using the bootstrap on my website and I want to show a small glyph icons next to the tabs but I want the glyph icons to change n the active tab. as you can see on the picture, right now all tabs have the same icon but I want the icon on the active tab to change to something else. what is the best way to do this?</p>
  
  <p>Thank you </p>
  
  <pre><code>&lt;ul class="nav nav-pills outline" id="prodtabs" role="tablist"&gt;
      &lt;li role="presentation" class="tab-title active outline"&gt;&lt;a href="#tabprodesc" aria-controls="home" role="tab" data-toggle="tab"&gt;product description&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation" class="tab-title outline"&gt;&lt;a href="#tabdetail" aria-controls="profile" role="tab" data-toggle="tab"&gt;detail specification &lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation" class="tab-title outline"&gt;&lt;a href="#tabreviews" aria-controls="messages" role="tab" data-toggle="tab"&gt;reviews &lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  
    &lt;/ul&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JuzPa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JuzPa.png" alt="enter image description here"></a></p>