title: How to create small text aligned center and below icon in Bootstrap 4 navbar nav-item without affecting navbar height?
body: <p>Using Bootstrap 4, I have a navbar with the following nav-item:</p>
  
  <p></p>
  
  <pre><code>&lt;form class="form-inline"&gt;
          &lt;a&gt; &lt;i class="fa fa-gear"&gt;&lt;/i&gt; Option A&lt;/a&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to add small text aligned center and below the icon. What is the best way to do this? (The Option A text should be big enough to be legible, but not big enough that the navbar bootstrap classes need to be modified to accommodate)</p>
  
  <p>Note: I want to make sure both the text and the icon are vertically aligned in the middle of the navbar without increasing the navbar's height, which pt-3 or mt-3 on the "a" appears to affect.</p>
  
  <p>Adding a <code>&lt;p&gt;</code> also appears to have made the navbar "taller"... which I want to avoid.</p>