Icon Filter + Sort

by Jens Kühn

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa-with-sub">
  <i class="fa fa-filter"></i>
  <i class="fa fa-sort"></i>  
</span>

SCSS

.fa-with-sub {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  vertical-align: middle;

  .fa {
    position: absolute;
    text-align: center;

    &:nth-child(1) {
      left: 0;
      width: 100%;
    }

    &:nth-child(2) {
      left: 50%;
      bottom: -25%;
      font-size: 75%;
      border-radius: 50%;
      width: 75%;
      height: 75%;
    }

  }
}