title: Navigation tabs cannot insert image. How to put image as an icon in nav-tabs?
body: <p>I'm having a bit of a problem where i don't know how to adjust the nav-tabs bootstrap/css file.</p>
  
  <p>I want to add an image file inside the nav-tabs and make it so that the image became an icon and have the margin-bottom be near the wording of the nav-tabs. As far as my progress goes, most of my attempts seems to have failed to achieve what I want.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="nav nav-tabs" role="tablist" id="CreditCardInfoTab"&gt;
    &lt;li role="presentation" class="fa-sans" id="lstItemTabSaved"&gt;
      &lt;a href="#saved" aria-controls="saved" class="lbl-credit fa-sans" role="tab" data toggle="tab"&gt;
        &lt;i class="icon-cd" src="../Images/tab-creditcard.png"&gt;
                              &lt;img style="margin-bottom: 0;" alt="credit/debit" /&gt;
                          &lt;/i&gt; Pay with Saved Credit Card
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li role="presentation" class="fa-sans"&gt;
      &lt;a href="#new" aria-controls="new" class="lbl-credit fa-sans" role="tab" data-toggle="tab"&gt;
        &lt;div class="icon-cd" style="margin-bottom: 0px;"&gt;
          &lt;img src="../Images/tab-creditcard.png" /&gt;
        &lt;/div&gt;
        Pay with New Credit Card
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/yasJr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yasJr.png" alt="enter image description here"></a></p>
  
  <p>As you can see in here ^, the saved tab tab became like that. I would appreciate any suggestion. thanks</p>