Font-awesome caret up and caret down stacked on top of each other

Question

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: https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=preview

<div class="col-md-4 col-xs-12">
  <div class="pull-left">
    <i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
    <i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
    <span style="padding-right: 8px">Worker</span>
  </div>
  <div class="pull-left">
    <i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
    <i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
    <span style="padding-right: 8px">Entitlement</span>
  </div>
  <div class="pull-left">
    <i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
    <i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
    <span style="padding-right: 8px">Request Date</span>
  </div>
</div>

Answer 1

Another way of doing this is with .fa-stack and a bit of css and html like this:

• Remove .pull-left from your <i>
• Put a <span class="fa fa-stack"></span> around each pair

.fa-stack {
  text-align: center;
}

.fa-stack .fa-caret-down {
  position: absolute;
  bottom: 0;
}

.fa-stack .fa-caret-up {
  position: absolute;
  top: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<div class="col-md-4 col-xs-12">
  <div class="pull-left">
    <span class="fa fa-stack">
        <i class="fa fa-caret-down" aria-hidden="true"></i>
        <i class="fa fa-caret-up" aria-hidden="true"></i>
    </span>
    <span style="padding-right: 8px">Worker</span>
  </div>
  <div class="pull-left">
    <span class="fa fa-stack">
        <i class="fa fa-caret-up" aria-hidden="true"></i>
        <i class="fa fa-caret-down" aria-hidden="true"></i>
    </span>
    <span style="padding-right: 8px">Entitlement</span>
  </div>
  <div class="pull-left">
    <span class="fa fa-stack">
        <i class="fa fa-caret-up" aria-hidden="true"></i>
        <i class="fa fa-caret-down" aria-hidden="true"></i>
    </span>
    <span style="padding-right: 8px">Request Date</span>
  </div>
</div>