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

问题

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>

回答1:

You can achieve this using bootstrap grid system--

Working Example

<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link data-require="fontawesome@4.4.0" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

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

</html>

回答2:

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>

回答3:

Here's a solution that uses flexbox:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link data-require="fontawesome@4.4.0" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

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

</html>

CSS:

.icon-container {
  display: flex;
  flex-direction: column
}

.pull-left {
  display: flex;
}

span { padding-top: 4px; }

new plunk

回答4:

You can simply wrap each <i> in a div

Since divs always take the whole width and start on a new line, this will automatically put them on top of eachother

You can then use css to style as you need

<div>
    <div>
        <i class="fa fa-caret-up"/>
    </div>
    <div>
        <i class="fa fa-caret-down"/>
    </div>
</div>

来源：https://stackoverflow.com/questions/42721254/font-awesome-caret-up-and-caret-down-stacked-on-top-of-each-other

标签

css

twitter-bootstrap

font-awesome