title: Position the caret in Bootstrap dropdown button
body: <p>I want to modify the Bootstrap dropdown button to move the caret out of the calculations for button width after padding. In other words, I want to "center" the text in the button by providing equal padding on each side, but have the dropdown caret still to the right.</p>
  
  <p>I've tried several things, including using relative positioning on the button (didn't work at all) and absolute positioning (partially worked but lost vertical positioning/centering).</p>
  
  <p>Additionally, there are several things making this trickier:</p>
  
  <ul>
  <li>Some dropdowns have no text, only an icon</li>
  <li>Icon is added with Font Awesome (uses <code>:before</code> element/selector)</li>
  </ul>
  
  <p><strong>Sample HTML:</strong></p>
  
  <pre><code>&lt;div class="btn-group"
      &lt;button type="button" class="btn btn-default dropdown-toggle fa fa-download"&gt;
          &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;button type="button" class="btn btn-default fa fa-envelope"&gt;&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="btn-group"&gt;
      &lt;button type="button" class="btn btn-default dropdown-toggle"&gt;
          More &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/uRkj1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uRkj1.png" alt="Sample Image"></a></p>
  
  <p>As you can see in the "correct" example, the caret is no longer affecting the width of the button (but is "inside" the button's padding, shown by the pink lines). Does anyone know how this is possible? Thanks!</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Thanks to @Dekel for the answer (slightly adapted it to suit my needs and work for both types [those with only icons and those with text]):</p>
  
  <pre><code>/* I also removed the space in the HTML before the caret, which is where "top" comes in */
  .btn.fa .caret {
      left: 5px;
      position: absolute;
      top: calc(50% - 1px);
  }
  .btn .caret {
      position: absolute;
      top: calc(50% - 1px);
      right: -12px;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/UnaviaMedia/pen/qqYgqX" rel="nofollow noreferrer">Codepen Example</a></p>