Adding different styles to two glyphicons in the same pseudo cell

I have a requirement where I need to have two different css styles which is displayed in the single pseudo cell.

I am using a class placing two unicode characters into one pseudo element. But I want two different colors for these two.

Please see the below css class:

.doubleSign:before {    
  font-family: 'Glyphicons Halflings';
  content: "\e086\e101";
  font-size: 10px !important;
  margin-bottom: -7px !important;
 }

How am I supposed to do that? Please help me. thanks.

Solution

You could declare two pseudo selector :before, :after on that .doubleSign and add styling to it individually as it's not possible to fetch them as single element.

.doubleSign:before{    
  font-family: 'Glyphicons Halflings';
  content: "\e086";
  font-size: 10px !important;
  margin-bottom: -7px !important;
  color:blue;
}  
.doubleSign:after{    
  font-family: 'Glyphicons Halflings';
  content: "\e101";
  font-size: 10px !important;
  margin-bottom: -7px !important;
  color:red;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="doubleSign">

</div>