title: Is it possible to use two icons in css content one below other
body: <p>I have a css class like below</p>
  
  <pre><code>.fa-unsorted:before, .fa-sort:before {
      content: '\e9c2';
      margin-top: -10px;
      color: #999999;
      font-family: 'icomoon';
  }
  </code></pre>
  
  <p>It displays following</p>
  
  <p><a href="https://i.stack.imgur.com/CGqeD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CGqeD.png" alt="enter image description here"></a></p>
  
  <p>What I want is to also include <code>\e9c1</code> as well but it should be displayed below <code>\e9c2</code>.</p>
  
  <p>For context, I am using a library that has the css class mentioned to display sort icon. It uses fa-sort which has both up and down arrow in the same icon.</p>
  
  <p><a href="https://i.stack.imgur.com/XCvjz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XCvjz.png" alt="enter image description here"></a></p>
  
  <p>But I am using icomoon which does not have that kind of replacement. So I need to use two icons to display a sort. Following is what I want</p>
  
  <p><a href="https://i.stack.imgur.com/wOT26.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wOT26.png" alt="enter image description here"></a></p>
  
  <p>I tried following for content, but as expected the arrows get displayed next to each other.</p>
  
  <pre><code>content: '\e9c2\e9c1';
  </code></pre>
  
  <p>Adding another class would be nice, but I don't have control on the JS to add new class.</p>