css - Font-awesome caret up 和 caret down 堆叠在彼此之上

Question

我正在尝试让两个 fontawesome 图标向上插入和向下插入以相互堆叠而不隐藏一个并显示另一个？任何建议将不胜感激。这是一个带有 Bootstrap 和 fontawesome 的 plucker: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

另一种方法是使用 .fa-stack 和一些像这样的 css 和 html:

• 删除 .pull-left来自你的 <i>
• 放一个<span class="fa fa-stack"></span>每对周围

.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>