JSFiddle - React, Tailwind, and code Playground

Stacked font awesome icons for sort handles

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="notes">
  <p>Notes for implementation</p>
  <ul>
    <li>An orange background is added to demonstrate the sort handle should work across an area that's larger than the pixels that represent the icons. The background should not be present on the real UI.</li>
    <li>Use <code>em</code> for the dimensions so that the overall size can be easily adjustable.</li>
    <li>Follow the design mockup to position, pad and align the icons appropriately.</li>
  </ul>
</div>

Sort icon:<br>
<span class="fa-stack icon-sort">
  <i class="fa fa-arrows-v fa-stack-1x"></i>
  <i class="fa fa-bars fa-stack-1x"></i>
</span><br>


Sort handle:<br>
<span class="fa-stack handle-sort" style="">
  <i class="fa fa-ellipsis-v fa-stack-1x"></i>
  <i class="fa fa-ellipsis-v fa-stack-1x"></i>
</span>

CSS

body {
  font-family: sans-serif;
  line-height: 1.62;
}

.notes {
  background: #dedede;
  padding: 15px;
  margin-bottom: 10px;
}

.icon-sort {
  background: orange;
  font-size: 0.8em; /* Adjust this size to change the overall icon size */
}

.icon-sort .fa-arrows-v {
  margin-left: -0.4em;
}

.icon-sort .fa-bars {
  font-size: 0.8em;
  margin-left: 0.25em;
}

.handle-sort {
  background: orange;
  font-size: 0.8em;  /* Adjust this size to change the overall icon size */
}

.handle-sort .fa-ellipsis-v:nth-child(1) {
  margin-left: -0.2em;
}

.handle-sort .fa-ellipsis-v:nth-child(2) {
  margin-left: 0.2em;
}