All geek questions in one place

Font - amazing turn and carriage stacked on top of each other

Am I trying to get two meaningful icons so that they can be dragged to each other's feet without hiding one and showing the other? Any suggestions would be 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>
+5
source share
3 answers

You can achieve this using the bootstrap 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>
+3
source

Another way to do this: .fa-stack and a bit of css and html like this:

  • Remove .pull-left from <i>
  • Place 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
source

Here is a solution using 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

0
source

Source: https://habr.com/ru/post/1265298/

More articles:


All Articles