Icon Filter + Info

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-expo">
  <i class="fa fa-filter"></i>
  <i class="fa fa-info"></i>  
</span>

<span class="fa-with-expo">
  <i class="fa fa-info"></i> 
  <i class="fa fa-filter"></i> 
</span>

CSS

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

.fa-with-expo .fa {
  position: absolute;
  text-align: center;
}

.fa-with-expo .fa:nth-child(1) {
  color: red;
  left: 0;
  width: 100%;
}

.fa-with-expo .fa:nth-child(2) {
  color: blue;
  left: 50%;
  top: -25%;
  font-size: 75%;
  background-color: rgba(240, 15, 240, 0.4);
  border-radius: 50%;
  width: 75%;
  height: 75%;
}