title: Font-awesome caret up and caret down stacked on top of each other
body: <p>I am trying to get two fontawesome icons caret up and caret down to stack on stop of each other without hiding one and showing the other? Any suggestions would be greatly appreciated. 
  Here is a plucker with Bootstrap and fontawesome: <a href="https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=preview" rel="noreferrer">https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=preview</a></p>
  
  <pre><code>&lt;div class="col-md-4 col-xs-12"&gt;
    &lt;div class="pull-left"&gt;
      &lt;i class="fa fa-caret-up pull-left" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;i class="fa fa-caret-down pull-left" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;span style="padding-right: 8px"&gt;Worker&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="pull-left"&gt;
      &lt;i class="fa fa-caret-up pull-left" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;i class="fa fa-caret-down pull-left" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;span style="padding-right: 8px"&gt;Entitlement&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="pull-left"&gt;
      &lt;i class="fa fa-caret-up pull-left" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;i class="fa fa-caret-down pull-left" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;span style="padding-right: 8px"&gt;Request Date&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>