字体 - 令人敬畏的插入和插入在彼此之上

时间：2017-03-10 14:52:37

标签： css twitter-bootstrap font-awesome

我试图得到两个奇特的图标，并且在不停留一个并显示另一个的情况下将它们叠加在彼此的停止上？任何建议将不胜感激。 这是一个使用Bootstrap和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>

5 个答案:

答案 0 :(得分：4)

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

  • 从.pull-left
    • 中删除<i>
  • 在每对附近放置一个<span class="fa fa-stack"></span>

＆＃13;
＆＃13; 
.fa-stack {
  text-align: center;
}

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

.fa-stack .fa-caret-up {
  position: absolute;
  top: 0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

您可以使用bootstrap网格系统实现此目的 -

工作示例

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这是一个使用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; }

新plunk

答案 3 :(得分：0)

您只需将每个<i>包装在div

中

由于div始终采用整个宽度并从新行开始，因此这会自动将它们放在彼此的顶部

然后您可以根据需要使用CSS设置样式

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

答案 4 :(得分：0)

这是一个老问题，但以防万一有人仍在寻找它，现在 Font Awesome 有它的图标。是 fa-sort：https://fontawesome.com/v4.7/icon/sort

相关问题
最新问题